WPF入门教程系列十——布局之Border与ScrollViewer（五）

WPF入门教程系列十——布局之Border与ScrollViewer（五）

九. Border

Border 是一个装饰的控件，此控件绘制边框及背景，在 Border 中只能有一个子控件，若要显示多个子控件，需要将一个附加的 Panel 控件放置在父 Border 中。然后可以将子控件放置在该 Panel控件中。

Border 的几个重要属性：

Background:用用一个 Brush 对象来绘制背景 ；

BorderBrush:用一个Brush 对象来绘制边框 ；

BorderThickness:此属性设置 Border 边框的大小；

CornerRadius:此属性设置 Border 的每一个角圆的半径；

Padding:此r属性设置 Border 里的内容与边框的之间的间隔。

接下来我们使用XAML代码做个示例，通过对Border的属性设置做出扑克牌的效果。

<Grid>
        <Canvas Name="mainCanvas" Background="Green" Width="300" Height="300">
            <Border BorderBrush="DarkGray" BorderThickness="0,0,2,2"
                    CornerRadius="18" Width="160" Height="230" Canvas.Left="53"
                    Canvas.Top="30">
                <Border BorderBrush="White" BorderThickness="5" CornerRadius="15">
                    <Border BorderBrush="Black" BorderThickness="1.5" CornerRadius="15">
                        <Border.Background>
                            <ImageBrush>
                                <ImageBrush.ImageSource>
                                    <BitmapImage UriSource="/Source/timg.jpg"/>
                                </ImageBrush.ImageSource>
                            </ImageBrush>
                        </Border.Background>
                    </Border>
                </Border>
            </Border>
        </Canvas>
    </Grid>

十. ScrollViewer

因为计算机屏幕的显示区域大小是固定的，如果我们要显示给用户看的内容，大大超出了计算机屏幕的最大显示区域、窗体、容器的限定显示页面，则超出的部分就会破坏原有的布局，这个时候我们就要使用类似于浏览器的那个滚动条的效果了。利用 ScrollViewer 控件可以方便地使应用程序中的内容具备滚动条功能。

接下来，我们来做个示例，效果如下图：

<Grid>
        <StackPanel>
            <ScrollViewer Name="scroll" Width="480" Height="350"
                          HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Auto" MaxWidth="500">
                <TextBlock Name="txtShowArticle" Foreground="Gray" Margin="20,10">
                </TextBlock>
            </ScrollViewer>
        </StackPanel>
    </Grid>

C#代码：

public partial class MainWindow : Window {
        public MainWindow()
        {
            InitializeComponent();
        }
        string content = @"岁末年初，正是各种新闻盘点的时候。中央纪委国家监委网站也在数一数2018年打掉的“老虎”，说一说去年的十大反腐热词，从中可以看出反腐丝毫不停歇、力度丝毫未减弱。
　　本周五，去年7月被查的广东省委原常委、统战部原部长曾志权有了新消息：他因严重违纪违法被开除党籍和公职。“双开”通报中有关“将公权力沦为谋取私利的工具”的表述，尚是首次在原省部级官员“双开”通报中出现。
　　更令人期待的，当属将要播出的五集纪实专题片《红色通缉》。这部由中央纪委国家监委宣传部联合中央广播电视总台摄制的专题片，将保持一贯的高水准，彰显党中央“不管腐败分子逃到哪里，都要缉拿归案、绳之以法”的坚定决心和鲜明态度。
　　曾志权：“十八大后不收敛、不收手的典型”
　　1月4日下午5时许，中央纪委国家监委网站发布了曾志权被“双开”的消息。这是中央纪委国家监委网站今年发布的第一条涉落马省部级干部的消息。
　　2018年7月，曾志权涉嫌严重违纪违法，接受中央纪委国家监委纪律审查和监察调查，成为十九大后首个在任上落马的省级常委。
　　公开简历显示，曾志权，男，汉族，1963年1月生，广东五华人。1986年进入广东省财政厅工作，历时24年，由科员升至省财政厅厅长、党组书记，2017年跻身广东省委常委，2018年4月担任广东省委常委、统战部部长。
　　曾志权被查之前，广东省财政厅有两名副厅长先后被查，而他们都是曾志权的副手。虽然曾志权在统战部长的位置上被查，但坊间多认为他的问题出在省财政厅的30年间。“双开”通报的内容也印证了这些猜测。
　　“双开”通报说：曾志权违反政治纪律，对抗组织审查；违反中央八项规定精神，超标准公务接待，接受可能影响公正执行公务的旅游活动安排；违反组织纪律，在组织函询时不如实说明问题，在干部选拔任用方面为他人谋取利益并收受钱款；违反廉洁纪律，为其亲属经营活动谋取利益，违规从事营利活动，收受礼金；违反工作纪律，违规决策；违反生活纪律。利用职务上的便利或职权、地位形成的便利条件为他人谋取利益并收受巨额财物，涉嫌受贿犯罪。
　　“双开”通报斥责道：曾志权身为党的高级领导干部，丧失理想信念，背离党的宗旨，将公权力沦为谋取私利的工具，与亲属结成利益共同体，利用财政资金审批权多方承揽工程，与私营企业主相互勾结，以“合法商业行为”之名掩盖权钱交易之实，严重违反党的纪律，构成职务违法并涉嫌犯罪，属于党的十八大后不收敛、不收手的典型，性质严重，影响恶劣，应予严肃处理。";
        private void ShowArticle()
        {
            StringBuilder strMessage=new StringBuilder();
            strMessage.Append("标题" + "今年首个被双开“老虎”出现 通报中有个特别表述" + "\r\n");
            strMessage.Append("来源：" + "上观" + "\r\n");
            strMessage.Append("发送时间：" + "2019年01月05日 10:11 " + "\r\n");
            strMessage.Append("发送内容：" + content + "\r\n\n");
            txtShowArticle.Text = strMessage.ToString();
        }
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            ShowArticle();
        }
    }

十一.布局综合应用

前面通过九个小节讲了一些常用Panel的基本用法，那我们这里就简单做一个综合的小例子，通过这个例子，旨在巩固前面学习的内容，温故而知新的过程。要实现的效果如下图:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="105*"></RowDefinition>
            <RowDefinition Height="25"></RowDefinition>
        </Grid.RowDefinitions>
        <DockPanel LastChildFill="True" >
            <Menu Height="25" Width="Auto" Name="menuTop" DockPanel.Dock="Top">
                <MenuItem Header="文件" HorizontalAlignment="Left">
                    <MenuItem Header="打开"/>
                    <MenuItem Header="保存"/>
                </MenuItem>
                <MenuItem Header="帮助" HorizontalAlignment="Left">
                    <MenuItem Header="查看帮助"/>
                    <MenuItem Header="技术支持"/>
                    <Separator/>
                    <MenuItem Header="关于"/>
                </MenuItem>
            </Menu>
            <Canvas Width="100" Name="cvsGround" DockPanel.Dock="Left" Background="Gray">
                <WrapPanel Width="100" Name="grdTransfer" Canvas.Left="0"
                           Background="SkyBlue" Orientation="Horizontal" PreviewMouseLeftButtonDown="GrdTransfer_PreviewMouseLeftButtonDown">
                    <Button Width="100" Height="64" Name="btn1" Background="SkyBlue"/>
                    <Button Width="100" Height="64" Name="btn2" Background="Orange"/>
                    <Button Width="100" Height="64" Name="btn3" Background="Red"/>
                    <Button Width="100" Height="64" Name="btn4" Background="Green"/>
                    <Button Width="100" Height="64" Name="btn5" Background="Yellow"/>
                </WrapPanel>
            </Canvas>
            <Canvas>
                <Viewbox Stretch="Fill">
                    <TextBlock Text="中间内容" Background="AliceBlue" Width="393" Height=" 319"/>
                </Viewbox>
            </Canvas>
        </DockPanel>
        <StatusBar Height="25" Name="StatusBar1" Grid.Row="1">
            <StatusBarItem Content="状态栏" Name="S1" HorizontalAlignment="Left"/>
            <StatusBarItem Content=" " Name="lblCurrTime"/>
            <StatusBarItem Content="第三栏" Name="StatusBars" Width="100"/>
        </StatusBar>
    </Grid>