WPF入門教程系列十——佈局之Border與ViewBox（五）

九. Border

Border 是一個裝飾的控件，此控件繪製邊框及背景，在 Border 中只能有一個子控件，若要顯示多個子控件，須要將一個附加的 Panel 控件放置在父 Border 中。而後能夠將子控件放置在該 Panel控件中。

Border 的幾個重要屬性：

Background:用用一個 Brush 對象來繪製背景 ；

BorderBrush:用一個Brush 對象來繪製邊框 ；

BorderThickness:此屬性設置 Border 邊框的大小；

CornerRadius:此屬性設置 Border 的每個角圓的半徑；

Padding:此r屬性設置 Border 裏的內容與邊框的之間的間隔。

接下來咱們使用XAML代碼作個示例，經過對Border的屬性設置作出撲克牌的效果。

 

 

<Window x:Class="WpfApp1.WindowBorder"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="WindowBorder" Height="400" Width="500">

    <Grid>

        <Canvas x: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="meinv.png" />

                                </ImageBrush.ImageSource>

                            </ImageBrush>

                        </Border.Background>

                    </Border>

                </Border>

            </Border>

        </Canvas>

    </Grid>

</Window>

 

 

十. ScrollViewer

由於計算機屏幕的顯示區域大小是固定的，若是咱們要顯示給用戶看的內容，大大超出了計算機屏幕的最大顯示區域、窗體、容器的限定顯示頁面，則超出的部分就會破壞原有的佈局，這個時候咱們就要使用相似於瀏覽器的那個滾動條的效果了。利用 ScrollViewer 控件能夠方便地使應用程序中的內容具有滾動條功能。

接下來，咱們來作個示例，效果以下圖：

 

XAML代碼：

<Window x:Class="WpfApp1.WindowScrollViewer"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="WindowScrollViewer" Height="400" Width="500" Loaded="Window_Loaded">

    <Grid>

        <StackPanel>

            <ScrollViewer Name="scroll" Width="480"  Height="350" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" >

 

                <TextBlock    Name="txtShowArticle"   Foreground="Gray" Margin="20,10" />

 

            </ScrollViewer>

        </StackPanel>

    </Grid>

</Window>

 

 

 

C#代碼：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

 

namespace WpfApp1

{

    /// <summary>

    /// WindowScrollViewer.xaml 的交互邏輯

    /// </summary>

    public partial class WindowScrollViewer : Window

    {

        public WindowScrollViewer()

        {

            InitializeComponent();

        }

        string content = @"一度賺錢賺得很差意思的中國銀行業，「躺着賺錢」的好日子已經到頭了。

在剛剛披露的上市銀行2014年報中，除平安銀行和浦發銀行外，其他8家上市銀行淨利潤增速均低於10%，其中中信銀行僅爲3.87%。

包括工行在內的多家國有大行和股份制銀行今年淨利增速相較去年腰斬。中資銀行的淨利增速基本進入個位數時代。

 

是什麼讓銀行業快車減速？除了去年不良貸款增長之下，各家銀行加大撥備吞噬淨利潤外，利率市場化的推動、金融脫媒的加速，

以及互聯網金融來勢洶洶都令銀行面臨挑戰。這些因素的疊加正在令銀行告別躺着賺錢的好日子，低速增加成爲銀行的「新常態」。

 

事實上，除了資產質量的考驗外，從更長時間的維度看，中國銀行業所面臨的政策環境的變化已經在過去幾年不斷令高歌猛進的銀行業淨利潤慢慢減緩，

以「宇宙行」工行爲例，2010年、2011年淨利潤仍維持28 .4%、25.6%的淨利潤增速，

但2012年開始大幅放緩至14.5%，2013年年報仍勉強維持在兩位數，2014年進一步跌至5.1%。

 

 

那麼銀行該如何實現「互聯網+」呢？在筆者看來，過去的兩年時間裏，

P2P、餘額寶等新生產品儘管讓互聯網金融看起來格外熱鬧，

但對銀行而言，互聯網金融更大的意義並不是在渠道的從新構建，

而在於價值鏈重構，「互聯網+」或許將帶領銀行從新發現價值。

 

除了表面熱鬧的互聯網渠道的應用外，對於銀行而言，更爲重要的是經過互聯網激活大數據，從新構建銀行的價值鏈。

 

首先，其基礎應該在於，其底層的生態搭建，體如今支付清算體系、徵信體系等的基礎技術的改造上。

 

其次，在此過程當中，銀行能夠實現再度的價值發現，如經過虛擬帳戶、遠程帳戶的變革，

將零售業務往移動端遷移，開發長尾用戶；並將利潤今後前的規模導向轉爲資金的流轉速度上，

同時利用大數據及供應鏈才能真正打開銀行小微信用藍海。

 

從上週工行發佈的一系列互聯網金融產品主要圍繞支付、社交以及移動端的零售能夠看出相似的思路。　";

      

        private void ShowArticle()

        {

            //獲取私信信息

           

            StringBuilder strMessage = new StringBuilder();

         

                strMessage.Append("標題" + "失速的銀行該如何實現「互聯網+」？" + "\r\n");

                strMessage.Append("來源：" + "南方都市報" + "\r\n");

                strMessage.Append("發送時間：" + "2015-04-02 06:31:32" + "\r\n");

                strMessage.Append("發送內容：" + content + "\r\n\n");

                txtShowArticle.Text = strMessage.ToString();

        }

 

        private void Window_Loaded(object sender, RoutedEventArgs e)

        {

            ShowArticle();

        }

    }

}

 

 

 

 

 

十一.佈局綜合應用

　　前面經過九個小節講了一些經常使用Panel的基本用法，那咱們這裏就簡單作一個綜合的小例子，經過這個例子，旨在鞏固前面學習的內容，溫故而知新的過程。要實現的效果以下圖:

 

XAML代碼實現：

<Window x:Class="WpfApp1.WindowComposite"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="WindowComposite" Height="400" Width="500">

    <Grid >

        <Grid.RowDefinitions>

 

            <RowDefinition Height="105*"/>

            <RowDefinition Height="25"/>

        </Grid.RowDefinitions>

 

 

 

  

        <DockPanel LastChildFill="True" Grid.Row="0">

<!—頂部，加一個菜單-->

            <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" x:Name="cvsGround"  DockPanel.Dock="Left" Background="Gray">

                <WrapPanel Width="100"  x:Name="grdTransfer" Canvas.Left="0" 

Background="SkyBlue" PreviewMouseLeftButtonDown="grdTest_PreviewMouseLeftButtonDown" 

PreviewMouseLeftButtonUp="grdTest_PreviewMouseLeftButtonUp" Orientation="Horizontal">

                    <Button Width="100" Height="64"  x:Name="btn1" Background="SkyBlue" />

                    <Button Width="100" Height="64" x:Name="btn2" Background="Orange" />

                    <Button Width="100" Height="64" x:Name="btn3" Background="Red" />

                    <Button Width="100" Height="64" x:Name="btn4" Background="Green" />

                    <Button Width="100" Height="64"  x:Name="btn5" Background="Yellow" />

                </WrapPanel>

 

            </Canvas>

 

            <Canvas>

                <Viewbox Stretch="Fill">

                    <TextBlock Text="中間內容" Background="AliceBlue" Width="393" Height="319"></TextBlock>

                </Viewbox>

            </Canvas>

        </DockPanel>

 

 

<!—底部，加一個狀態欄-->

        <StatusBar Height="25" Name="StatusBar1"  Grid.Row="1">

            　　　　　　　　

            <StatusBarItem Content="狀態欄" Name="S1" HorizontalAlignment="Left"/>

            　　　　　　　　

            <StatusBarItem Content="" Name="lblCurrTime"/>

            　　　　　　　　

            <StatusBarItem Content="第三欄" Name="StatusBar3" Width="100"/>

            　　　　　　

        </StatusBar>

    </Grid>

 

 

</Window>

 

　　其實用熟練上面的各個佈局控件之後，你會發現佈局UI是一件很是容易的事，遇到一個新的UI，你會發現任意一個Panel均可以實現你的需求。