WPF入門教程系列十——布局之Border與ViewBox（五）
阿新 • • 發佈：2017-09-24
last () put prev 裝飾 wpf 背景 .text 部分 
九. 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都可以實現你的需求。
WPF入門教程系列十——布局之Border與ViewBox（五）