WPF 10天修炼 第六天- 系统属性和常用控件

 WPF系统属性和常用控件

渐变的背景色

         WPF中的前景色和背景色不同于传统Winform的设置，这些属性都是Brush类型的值。在XAML中，当为这些属性设置指定的颜色后将被转换为SolidColorBrush类的调用。所有的控件都提供了背景色和前景色。在WPF中可以设置背景色为线性渐变色。 

<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则表示完全透明。

<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>

更改鼠标光标 

         WPF在FrameworkElement中定义了一个Cursor属性，该属性是System.Windows.Input.Cursor类型的属性值，可以使用该属性来设置和获取鼠标的光标。

Cursor属性所有枚举光标类型： 

<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提示控件

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则不能。不同：

1、  Popup控件不会自动显示，必须设置IsOpen属性来使其显示。

2、  默认情况下，Popup.StaysOpen属性设置为true，因此Popup打开后并不会自动消失，除非开发人员将IsOpen属性设为false。如果设置StaysOpen为false，则用户可单击任何地方来关闭Popup控件。

3、  Popup提供了PopupAnimation属性让开发人员可以控制Popup如何打开，可选的值有None、Fade、Scroll和Slide。其中None代表默认值，不显示动画；Fade表示淡入效果；Scroll表示滚动效果；Slide表示滑动效果。为了让这些动画可以正常运行，必须设置AllowsTransparency属性值为true。

4、  Popup控件可以接收焦点，可以防止一些交互式控件到窗口中。

5、  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>