更新UI界面

ui界面各元素的位置分布&显示

在同一个ui界面中可能包含有图片、文字、文本框、进度条等多种控件，如何在保持分布比例的基础上将各元素排布的仅仅有条，这里主要使用到Grid布局。

Grid布局是WPF中一种非常常用的表格布局，它可以将整个界面划分为规则的几行几列，也可以单独将其中一行划分为需要的列数。界面中使用的控件可以单独位于一个网格中，也可以跨行列分布。需要注意的是行列的标号都是从0开始的

Grid中的长和高有2种设置方法
1.数字，10，10磅
2.总长度/高度减去数字除以所有的总和乘以系数，如 3个格子的长度为50*/50*/25 总长度为100，那么第一格长度：（100-25）/（50+50）*50

具体代码实现如下

        <!--定义行-->
        <Grid.RowDefinitions>
            <!--按比例行高-->
            <RowDefinition Height="24*"></RowDefinition>
            <RowDefinition Height="32.4*"></RowDefinition>
            <RowDefinition Height="47.6*"></RowDefinition>
            <RowDefinition Height="33*"></RowDefinition>
        </Grid.RowDefinitions>

        <!--将第二行划分列，并在对应网格中添加控件，注意要将TextBlock写在Grid里面，这里行数Grid.Row可以不定义，但列数Grid.Column必须按照实际情况说明，否则会默认从0开始排列控件-->
        <Grid Name="title" Grid.Row="1" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="33*"/>
                <ColumnDefinition Width="186*"/>
                <ColumnDefinition Width="477*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="1" Grid.Column="3" Text="正在升级" VerticalAlignment="Bottom" FontSize="20" Foreground="White"/>
        </Grid>

在TextBlock中实现进度条的数据实时显示

之前的程序中已经实现了进度条进度的显示功能，只不过是在进度条内部显示的，现在想把这个数据单独提出来，以一个TextBlock或者lable的形式显示。

具体实现方法如下：在UI界面的对应位置添加TextBlock后，为该TextBlock取一个名字（控件类型缩写+控件内容）：

 <TextBlock  Name="tbPercent" Grid.Column="2"  VerticalAlignment="Center" FontSize="18" Foreground="White" Margin="5,0,0,0"/>

之后再对应的cs文件中对该TextBlock的内容进行赋值，最后添加%

 tbPercent.Text = 计算进度表达式+"%";

为窗口添加阴影

在WPF中为控件添加阴影非常简单，只需要使用控件的Effect属性，如：

    <TextBlock.Effect>
        <DropShadowEffect Color="Black" Direction="315" ShadowDepth="5" Opacity="0.5" />
    </TextBlock.Effect>

但是若想对窗口添加阴影，不能简单添加Effect属性，还要设置BorderThickness：

<Window x:Class="XXX"
        xmlns="XXX"
        xmlns:x="XXX"
        xmlns:d="XXX"
        xmlns:mc="XXX"
        xmlns:local="XXX"
        mc:Ignorable="XXX"
        Title="UpdateWindow" Height="260" Width="804" 
        <!--设定BorderThickness-->
        BorderThickness="10"
        ResizeMode="NoResize" WindowStyle="None" AllowsTransparency="True" Background="Transparent">

         <!--设定Effect属性-->
         <Window.Effect>
            <DropShadowEffect Color="Black" Direction="315" ShadowDepth="5" Opacity="0.5" />
         </Window.Effect>

</Window>