WPF系統屬性和經常使用控件express
漸變的背景色app
WPF中的前景色和背景色不一樣於傳統Winform的設置,這些屬性都是Brush類型的值。在XAML中,當爲這些屬性設置指定的顏色後將被轉換爲SolidColorBrush類的調用。全部的控件都提供了背景色和前景色。在WPF中能夠設置背景色爲線性漸變色。 ide
<Window x:Class="WPFDemo.BurshDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDemo" mc:Ignorable="d" Title="BurshDemo" Height="300" Width="300"> <Grid Name="grd" Background="LightGreen"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Button Margin="10" Grid.Row="0" Background="AliceBlue" Foreground="Red" Content="背景色是AliceBlue,前景色是Red!"></Button> <Button Margin="10" Grid.Row="1" Content="背景色爲漸變顏色"> <Button.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Yellow" Offset="0.0"></GradientStop> <GradientStop Color="Blue" Offset="0.2"></GradientStop> <GradientStop Color="Red" Offset="0.75"></GradientStop> <GradientStop Color="LimeGreen" Offset="1"></GradientStop> </LinearGradientBrush> </Button.Background> </Button> <Button Name="btnOpacity" Margin="10" Grid.Row="3" Background="AliceBlue" Foreground="Red" Content="設置透明度!"></Button> </Grid> </Window>
後臺代碼:工具
public BurshDemo() { InitializeComponent(); CreateButton(); btnOpacity.Background = new SolidColorBrush(Color.FromArgb(0, 100, 100, 100)); } public void CreateButton() { Button btn = new Button(); btn.Content = "使用後臺代碼建立Button,並設置背景色和前景色爲漸變"; btn.Margin = new Thickness(10); Grid.SetRow(btn, 2); grd.Children.Add(btn); //建立按鈕前景漸變色 LinearGradientBrush foreGroundColor = new LinearGradientBrush(); foreGroundColor.StartPoint = new Point(0.5, 0.5); foreGroundColor.EndPoint = new Point(1, 1); foreGroundColor.GradientStops.Add( new GradientStop(Colors.Aqua, 0) ); foreGroundColor.GradientStops.Add( new GradientStop(Colors.Aqua, 0.5) ); foreGroundColor.GradientStops.Add( new GradientStop(Colors.Aqua, 0.75) ); foreGroundColor.GradientStops.Add( new GradientStop(Colors.Aqua, 1) ); btn.Foreground = foreGroundColor; //建立按鈕背景漸變顏色 LinearGradientBrush backGroundColor = new LinearGradientBrush(); backGroundColor.StartPoint = new Point(0.5, 0.5); backGroundColor.EndPoint = new Point(1, 1); backGroundColor.GradientStops.Add( new GradientStop(Colors.AliceBlue, 0) ); backGroundColor.GradientStops.Add( new GradientStop(Colors.Red, 0.4) ); backGroundColor.GradientStops.Add( new GradientStop(Colors.Black, 0.75) ); backGroundColor.GradientStops.Add( new GradientStop(Colors.Blue, 1) ); btn.Background = backGroundColor; }
透明度設置動畫
UIElement定義了Opacity屬性,使用該屬性能夠爲控件設置透明度。該屬性的值在0.0 – 1.0 之間。默認爲1.0表示徹底不透明,值0.0則表示徹底透明。spa
<Window x:Class="WPFDemo.OpacityDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDemo" mc:Ignorable="d" Title="OpacityDemo" Height="300" Width="300"> <Window.Background> <ImageBrush Stretch="UniformToFill" ImageSource="Images/back.png"></ImageBrush> </Window.Background> <Grid > <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Button Grid.Row="0" Opacity="0" Margin="10" Content="透明度0"></Button> <Button Grid.Row="1" Opacity="0.4" Margin="10" Content="透明度0.4"></Button> <Button Grid.Row="2" Opacity="0.8" Margin="10" Content="透明度0.8"></Button> <Button Grid.Row="3" Opacity="1" Margin="10" Content="透明度1"></Button> </Grid> </Window>
更改鼠標光標 3d
WPF在FrameworkElement中定義了一個Cursor屬性,該屬性是System.Windows.Input.Cursor類型的屬性值,可使用該屬性來設置和獲取鼠標的光標。orm
Cursor屬性全部枚舉光標類型: xml
<Window x:Class="WPFDemo.CursorDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDemo" mc:Ignorable="d" Title="CursorDemo" Height="300" Width="300"> <DockPanel> <TextBlock DockPanel.Dock="Top" Background="LightBlue" Foreground="Red" Margin="0,0,0,10" FontSize="20">經常使用鼠標光標符號</TextBlock> <UniformGrid Rows="3" Columns="10" > <Button Cursor="AppStarting" Content="AppStarting" Background="LightBlue" ></Button> <Button Cursor="Arrow" Content="Arrow" Background="LightGreen" ></Button> <Button Cursor="ArrowCD" Content="ArrowCD" Background="LightBlue" ></Button> <Button Cursor="Cross" Content="Cross" Background="LightGreen" ></Button> <Button Cursor="Hand" Content="Hand" Background="LightBlue" ></Button> <Button Cursor="Help" Content="Help" Background="LightGreen" ></Button> <Button Cursor="IBeam" Content="IBeam" Background="LightBlue" ></Button> <Button Cursor="No" Content="No" Background="LightGreen" ></Button> <Button Cursor="None" Content="None" Background="LightBlue" ></Button> <Button Cursor="Pen" Content="Pen" Background="LightGreen" ></Button> <Button Cursor="ScrollAll" Content="ScrollAll" Background="LightBlue" ></Button> <Button Cursor="ScrollE" Content="ScrollE" Background="LightGreen" ></Button> <Button Cursor="ScrollN" Content="ScrollN" Background="LightBlue" ></Button> <Button Cursor="ScrollNE" Content="ScrollNE" Background="LightGreen" ></Button> <Button Cursor="ScrollNS" Content="ScrollNS" Background="LightBlue" ></Button> <Button Cursor="ScrollNW" Content="ScrollNW" Background="LightGreen" ></Button> <Button Cursor="ScrollS" Content="ScrollS" Background="LightBlue" ></Button> <Button Cursor="ScrollSE" Content="ScrollSE" Background="LightGreen" ></Button> <Button Cursor="ScrollSW" Content="ScrollSW" Background="LightBlue" ></Button> <Button Cursor="ScrollW" Content="ScrollW" Background="LightGreen" ></Button> <Button Cursor="ScrollWE" Content="ScrollWE" Background="LightBlue" ></Button> <Button Cursor="SizeAll" Content="SizeAll" Background="LightGreen" ></Button> <Button Cursor="SizeNESW" Content="SizeNESW" Background="LightBlue" ></Button> <Button Cursor="SizeNS" Content="SizeNS" Background="LightGreen" ></Button> <Button Cursor="SizeNWSE" Content="SizeNWSE" Background="LightBlue" ></Button> <Button Cursor="SizeWE" Content="SizeWE" Background="LightGreen" ></Button> <Button Cursor="UpArrow" Content="UpArrow" Background="LightBlue" ></Button> <Button Cursor="Wait" Content="Wait" Background="LightGreen" ></Button> </UniformGrid> </DockPanel> </Window>
ToolTip提示控件blog
ToolTip控件又稱工具提示控件,是指當素表懸停在某個工具按鈕上,顯示出來的黃色小窗口。
<Window x:Class="WPFDemo.ToolTipDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDemo" mc:Ignorable="d" Title="ToolTipDemo" Height="300" Width="300"> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Button Grid.Row="0" Content="工具提示條" Margin="20" ToolTip="我是一個簡單的工具提示條"/> <Button Grid.Row="1" Margin="20" Content="我是一個工具提示條"> <Button.ToolTip> <StackPanel> <Image Source="Images/toolTip.png" MaxWidth="50" MaxHeight="50"></Image> <TextBlock Text="帶圖片的工具提示條窗口"></TextBlock> </StackPanel> </Button.ToolTip> </Button> </Grid> </Window>
Popup控件
Popup控件使用效果和ToolTip相似,最大的區別在於Popup控件能夠接收輸入焦點,而ToolTip則不能。不一樣:
一、 Popup控件不會自動顯示,必須設置IsOpen屬性來使其顯示。
二、 默認狀況下,Popup.StaysOpen屬性設置爲true,所以Popup打開後並不會自動消失,除非開發人員將IsOpen屬性設爲false。若是設置StaysOpen爲false,則用戶可單擊任何地方來關閉Popup控件。
三、 Popup提供了PopupAnimation屬性讓開發人員能夠控制Popup如何打開,可選的值有None、Fade、Scroll和Slide。其中None表明默認值,不顯示動畫;Fade表示淡入效果;Scroll表示滾動效果;Slide表示滑動效果。爲了讓這些動畫能夠正常運行,必須設置AllowsTransparency屬性值爲true。
四、 Popup控件能夠接收焦點,能夠防止一些交互式控件到窗口中。
五、 Popup控件定義在System.Windows.Control.Primitives命名空間中。
<Window x:Class="WPFDemo.PopupDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDemo" mc:Ignorable="d" Title="PopupDemo" Height="500" Width="800"> <Grid ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="3*" /> </Grid.RowDefinitions> <Button HorizontalAlignment="Left" Click="Button_Click" Width="150" Grid.Row="0"> <StackPanel> <TextBlock>單擊這裏彈出窗口</TextBlock> <Popup Name="myPopup" MaxHeight="200" StaysOpen="False" Placement="Mouse" AllowsTransparency="True" PopupAnimation="Fade"> <Border BorderBrush="Black" BorderThickness="2" Background="AliceBlue"> <TextBlock Name="myPopupText" TextWrapping="Wrap"> Popup示例,StaysOpen爲false,表示能夠單擊任意位置關閉Popup,PopuAnimation爲Fade表示動畫彈出 </TextBlock> </Border> </Popup> </StackPanel> </Button> <Canvas Background="AliceBlue" Grid.Row="1"> <Button Name="btn1" Margin="100" HorizontalAlignment="Right" VerticalAlignment="Center" Width="200" Height="150">button</Button> <Popup IsOpen="True" PlacementTarget="{Binding ElementName=btn1}" Placement="Bottom"> <TextBlock Background="LightBlue">Placement=Bottom</TextBlock> </Popup> <Popup IsOpen="True" PlacementTarget="{Binding ElementName=btn1}" Placement="Top"> <TextBlock Background="LightBlue">Placement=Top</TextBlock> </Popup> <Popup IsOpen="True" PlacementTarget="{Binding ElementName=btn1}" Placement="Left"> <TextBlock Background="LightBlue">Placement=Left</TextBlock> </Popup> <Popup IsOpen="True" PlacementTarget="{Binding ElementName=btn1}" Placement="Right"> <TextBlock Background="LightBlue">Placement=Right</TextBlock> </Popup> </Canvas> </Grid> </Window>
ListBox列表框控件
<Window x:Class="WPFDemo.ListBoxDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDemo" mc:Ignorable="d" Title="ListBoxDemo" Height="500" Width="800"> <DockPanel> <StackPanel DockPanel.Dock="Top" Background="LightBlue"> <TextBlock FontSize="20"> ListBox應用示例 </TextBlock> </StackPanel> <Grid DockPanel.Dock="Left"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition/> </Grid.ColumnDefinitions> <StackPanel Background="LightBlue" Grid.Column="0"> <StackPanel> <TextBlock FontSize="14">單選</TextBlock> </StackPanel> <StackPanel> <TextBlock>待選</TextBlock> <ScrollViewer MaxHeight="200" HorizontalScrollBarVisibility="Auto"> <ListBox Name="listBox1" Height="200" SelectionMode="Extended" SelectionChanged="listBox1_SelectionChanged"> <ListBoxItem> <Image Source="Images/0.jpg" Width="30" Height="30"></Image> </ListBoxItem> <ListBoxItem> <StackPanel> <Image Source="Images/1.jpg" Width="30" Height="30"></Image> </StackPanel> </ListBoxItem> <ListBoxItem> <StackPanel> <Image Source="Images/2.jpg" Width="30" Height="30"></Image> </StackPanel> </ListBoxItem> <ListBoxItem> <StackPanel> <Image Source="Images/3.jpg" Width="30" Height="30"></Image> </StackPanel> </ListBoxItem> <ListBoxItem> <StackPanel> <Image Source="Images/4.jpg" Width="30" Height="30"></Image> </StackPanel> </ListBoxItem> <ListBoxItem> <StackPanel> <Image Source="Images/5.jpg" Width="30" Height="30"></Image> </StackPanel> </ListBoxItem> <ListBoxItem> <StackPanel> <Image Source="Images/6.jpg" Width="30" Height="30"></Image> </StackPanel> </ListBoxItem> <ListBoxItem> <StackPanel> <Image Source="Images/7.jpg" Width="30" Height="30"></Image> </StackPanel> </ListBoxItem> <ListBoxItem> <StackPanel> <Image Source="Images/8.jpg" Width="30" Height="30"></Image> </StackPanel> </ListBoxItem> <ListBoxItem> <StackPanel> <Image Source="Images/9.jpg" Width="30" Height="30"></Image> </StackPanel> </ListBoxItem> </ListBox> </ScrollViewer> </StackPanel> <StackPanel> <TextBlock>已選</TextBlock> <ScrollViewer MaxHeight="200" HorizontalScrollBarVisibility="Auto"> <ListBox Name="listBox1_Selected" MaxHeight="200" Height="200" SelectionChanged="listBox1_Selected_SelectionChanged"> </ListBox> </ScrollViewer> </StackPanel> </StackPanel> <StackPanel Background="LightGreen" Grid.Column="1"> <StackPanel> <TextBlock FontSize="14">多選</TextBlock> <TextBlock>待選 <Button Name="btnList2Ok" Click="btnList2Ok_Click">確認選擇</Button> <Button Name="btnList2Cancel" Click="btnList2Cancel_Click">清空選擇</Button> </TextBlock> <ScrollViewer MaxHeight="200" Height="200" > <ListBox Name="listbox2" > <ListBoxItem> <CheckBox>選項0</CheckBox> </ListBoxItem> <ListBoxItem> <CheckBox>選項1</CheckBox> </ListBoxItem> <ListBoxItem> <CheckBox>選項2</CheckBox> </ListBoxItem> <ListBoxItem> <CheckBox>選項3</CheckBox> </ListBoxItem> <ListBoxItem> <CheckBox>選項4</CheckBox> </ListBoxItem> <ListBoxItem> <CheckBox>選項5</CheckBox> </ListBoxItem> <ListBoxItem> <CheckBox>選項6</CheckBox> </ListBoxItem> <ListBoxItem> <CheckBox>選項7</CheckBox> </ListBoxItem> <ListBoxItem> <CheckBox>選項8</CheckBox> </ListBoxItem> <ListBoxItem> <CheckBox>選項9</CheckBox> </ListBoxItem> </ListBox> </ScrollViewer> <TextBlock>已選</TextBlock> <ScrollViewer MaxHeight="200" Height="200"> <ListBox Name="listbox2_Selected"> </ListBox> </ScrollViewer> </StackPanel> </StackPanel> </Grid> </DockPanel> </Window>
後臺代碼:
private void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e) { ListBoxItem item = (sender as ListBox).SelectedItem as ListBoxItem; listBox1.Items.Remove(item); listBox1_Selected.Items.Add(item); } private void listBox1_Selected_SelectionChanged(object sender, SelectionChangedEventArgs e) { ListBoxItem item = (sender as ListBox).SelectedItem as ListBoxItem; listBox1_Selected.Items.Remove(item); listBox1.Items.Add(item); } private void btnList2Ok_Click(object sender, RoutedEventArgs e) { foreach (ListBoxItem item in listbox2.Items) { if ((item.Content as CheckBox).IsChecked == true) { listbox2_Selected.Items.Add((item.Content as CheckBox).Content); } } } private void btnList2Cancel_Click(object sender, RoutedEventArgs e) { listbox2_Selected.Items.Clear(); }
ProgressBar進度條控件
ProgressBar控件默認狀況下Minimum屬性爲0,Maximum爲100,Value值能夠動態在在最小和最大值之間進行切換。
IsIndeterminate屬性能夠獲取或設置ProgressBar是顯示實際值仍是顯示連續進度動畫,若是不知道進度具體的執行細節可讓ProgressBar顯示連續的進度動畫。
Orientaion屬性能夠設置ProgressBar的方向。Horizontal表示水平方向,Vertical表示垂直方向。
<Window x:Class="WPFDemo.ProgressBarDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDemo" mc:Ignorable="d" Title="ProgressBarDemo" Height="300" Width="500"> <Grid> <ProgressBar Height="10" Width="200" IsIndeterminate="True"></ProgressBar> <StackPanel Grid.Row="1" Margin="10"> <ProgressBar Height="10" Name="prog1" Margin="10"></ProgressBar> <Button Content="開始" Width="100" Click="Button_Click" HorizontalAlignment="Right"></Button> </StackPanel> </Grid> </Window>
後臺代碼:
private void Button_Click(object sender, RoutedEventArgs e) { Duration duration = new Duration(TimeSpan.FromMilliseconds(2000)); DoubleAnimation doubleanimation = new DoubleAnimation(100.0, duration); prog1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation); }
Slider滑動條控件
Slider滑動控件,能夠與用戶進行交互,容許用戶拖動滑塊來調整Value的值。
Slider控件屬性:
屬性名稱 |
說明 |
Delay 和 Interval |
控制滑塊的速度,以毫秒爲單位。 |
TickPlacement |
決定刻度標記顯示的顯示位置。 |
TickFrequency |
獲取或設置刻度線之間的間隔。 |
Ticks |
獲取或設置Slider顯示的刻度線的位置。 |
IsSnapToTickEnabled |
設置爲True,當移動滑塊時,將自動與刻度線進行捕捉,並跳轉到最近的刻度線。默認爲false |
IsSelectionRangeEnabled |
設置爲true,用戶可以在Slider上進行選擇一個範圍。使用SelectionStart和SelectionEnd方法來選擇一個範圍。 |
AutoToolPlacement |
獲取或設置按下滑塊時是否顯示包含Slider的當前值的工具提示。 |
<Window x:Class="WPFDemo.SliderDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDemo" mc:Ignorable="d" Title="SliderDemo" Height="300" Width="300"> <StackPanel> <TextBlock Margin="10" Foreground="Blue" FontSize="16"> <TextBlock Text="矩形(高度,寬度)" /> ( <TextBlock Text="{Binding ElementName=RectangleHeight,Path=Value}"></TextBlock> , <TextBlock Text="{Binding ElementName=RectangleWidth,Path=Value}"></TextBlock> ) </TextBlock> <TextBlock Margin="10"> 設置矩形高度 </TextBlock> <Slider Name="RectangleHeight" Width="100" Height="20" Value="30" HorizontalAlignment="Left" IsSnapToTickEnabled="True" Minimum="1" Maximum="100" TickPlacement="BottomRight" TickFrequency="1" AutoToolTipPrecision="2" AutoToolTipPlacement="BottomRight" IsDirectionReversed="False" IsMoveToPointEnabled="False" ></Slider> <TextBlock Margin="10"> 設置矩形寬度 </TextBlock> <Slider Name="RectangleWidth" Width="100" Height="20" Value="50" HorizontalAlignment="Left" IsSnapToTickEnabled="True" Minimum="1" Maximum="100" TickPlacement="BottomRight" AutoToolTipPlacement="BottomRight" AutoToolTipPrecision="2"></Slider> <Rectangle Fill="Blue" HorizontalAlignment="Left" Margin="10" Height="{Binding ElementName=RectangleHeight,Path=Value}" Width="{Binding ElementName=RectangleWidth,Path=Value}"> </Rectangle> </StackPanel> </Window>