none
TFSoft Xaml中的UI元素命名与界面布局常用规则。 RRS feed

  • 常规讨论

  • <!--
    这是一个信息显示页面的例子
    说明TFSoft界面设计、变量命名通常采用的规则
    正常情况下字体大小 12 Pixel, 中文采用宋体字(等宽字体),英文采用Arial(不等宽)。
    有时为了对齐,仅采用等宽字体NSimSun,但是这样,在Silverlight里面显示英文时,不太清晰。
    -->
    <UserControl x:Class="SlCjTest.MainPage"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 FontFamily="Arial,NSimSun"
                 FontSize="12">
        <!--
        1)代码中需要访问的元素,一般要命名,
       
        2)不需要在代码中访问的元素,一般不命名。

        3)共同为某个目的服务的元素,以目的为基础进行加长拓展命名。
        比如:
            数据库有个字段是兴趣(Interest),而兴趣分为房子(House)、
            女子(Beauty)、儿子(Son)、票子(Money)、车子(Car)。
            需要用TextBlock+CheckBox组合来表达。
            命名时可以这样, InpInterest/ChkInterestHouse/ChkInterestBeauty/
            ChkInterestSon/ChkInterestMoney/ChkInterestCar
            一定要把目的放在前面,修饰放后面,这样他们更有可能排在一起
            方便查找和阅读。

        由于Root布局的可控性较好,
        所以Root一般用Grid开始,不用Canvas、Border等元素开始。
        一般划分为标题区、主要工作区域、装饰线区域、主要命令区域
        -->
        <Grid x:Name="GrdRoot"
              Width="500"
              Height="400"
              Background="AliceBlue">
            <Grid.RowDefinitions>
                <RowDefinition Height="40"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="10"></RowDefinition>
                <RowDefinition Height="40"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.Effect>
                <DropShadowEffect ShadowDepth="2"
                                  BlurRadius="1"
                                  Color="Black"></DropShadowEffect>
            </Grid.Effect>
            <Border Grid.Row="1"
                    Grid.RowSpan="4"
                    BorderBrush="Silver"
                    BorderThickness="1"></Border>
            <!--
            标题区域
            -->
            <Grid Grid.Row="0"
                  Margin="2">
                <TextBlock HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           FontWeight="Bold"
                           Text="Edit Student's Information"></TextBlock>
            </Grid>
            <!--
            主要工作区域
            -->
            <Grid Grid.Row="1"
                  Grid.Column="1"
                  Margin="2">
                <!--
                第一行/第一列定义的高度/宽度为0,
                目的是忽略该行/列的作用,更符合人类思维从1开始的习惯。
                注:我们从小的教育都是从1开始,不是从0开始,
                还一个好处,就是可以对照Excel表格的行列,不用动脑筋。
                我一般都是在Excel中先画好表格,然后做Xaml。
                当然我现在是用自己的ExcelToXaml转换工具直接转换。
                -->
                <Grid.RowDefinitions>
                    <RowDefinition Height="0"></RowDefinition>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0"></ColumnDefinition>
                    <ColumnDefinition Width="25*"></ColumnDefinition>
                    <ColumnDefinition Width="75*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <!--
                文本类型信息通常左对齐
                用TextBox, 命名加前缀Inp
                不可编辑时为灰底蓝字
                -->
                <TextBlock Grid.Row="1"
                           Grid.Column="1"
                           Margin="2"
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
                           Text="Id: "></TextBlock>
                <TextBox x:Name="InpId"
                         Grid.Row="1"
                         Grid.Column="2"
                         Margin="2"
                         Foreground="Blue"
                         IsReadOnly="True"
                         Text="0001"></TextBox>
                <!--
                对于向导类型信息(也就是说提供向导输入的信息)
                用TextBlock(显示) + Button(选择),命名加前缀 Inp + Btn
                文本一般白底蓝字
                -->
                <TextBlock Grid.Row="2"
                           Grid.Column="1"
                           Margin="2"
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
                           Text="Exact Location: "></TextBlock>
                <Border Grid.Row="2"
                        Grid.Column="2"
                        Margin="2"
                        CornerRadius="2"
                        BorderBrush="Silver"
                        BorderThickness="1">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="54"></ColumnDefinition>
                            <ColumnDefinition Width="54"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBox x:Name="InpLocation"
                                 Grid.Column="0"
                                 Foreground="Blue"
                                 BorderThickness="0"
                                 IsReadOnly="False"
                                 Text="Unknown Location"></TextBox>
                        <Button x:Name="BtnLocationSelect"
                                Grid.Column="1"
                                Width="50"
                                Height="20"
                                Content="Select"
                                ToolTipService.ToolTip="Select Student's Location Information"></Button>
                        <Button x:Name="BtnLocationClear"
                                Grid.Column="2"
                                Width="50"
                                Height="20"
                                Content="Clear"
                                ToolTipService.ToolTip="Clear Student's Location Information"></Button>
                    </Grid>
                </Border>
                <!--
                对于选择类型信息
                用ComboBox, 命名加前缀Cbo
                文本一般白底蓝字
                -->
                <TextBlock Grid.Row="3"
                           Grid.Column="1"
                           Margin="2"
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
                           Text="City: "></TextBlock>
                <ComboBox  x:Name="InpCity"
                           Grid.Row="3"
                           Grid.Column="2"
                           Margin="2"
                           Foreground="Blue">
                    <ComboBox.Items>
                        <ComboBoxItem Content="Nanchang"
                                      IsSelected="True"></ComboBoxItem>
                        <ComboBoxItem Content="Nanjing"></ComboBoxItem>
                        <ComboBoxItem Content="Beijing"></ComboBoxItem>
                    </ComboBox.Items>
                </ComboBox>
                <!--
                文本类型信息通常左对齐
                用TextBox, 命名加前缀Inp
                可编辑时为白底蓝字
                -->
                <TextBlock Grid.Row="4"
                           Grid.Column="1"
                           Margin="2"
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
                           Text="Name: "></TextBlock>
                <TextBox x:Name="InpName"
                         Grid.Row="4"
                         Grid.Column="2"
                         Margin="2"
                         Foreground="Blue"
                         Text="TFSoft"></TextBox>

                <!--
                是否等单选类型信息通常
                用RadioButtomn组合, 命名加前缀Opt
                可编辑时为白底蓝字
                -->
                <TextBlock Grid.Row="5"
                           Grid.Column="1"
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
                           Margin="2"
                           Text="Gender: "></TextBlock>
                <Border Grid.Row="5"
                        Grid.Column="2"
                        Margin="2"
                        CornerRadius="2"
                        BorderBrush="Silver"
                        BorderThickness="1">
                    <StackPanel VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Orientation="Horizontal">
                        <RadioButton x:Name="OptGenderMale"
                                     Content="Male"
                                     Foreground="Blue"
                                     IsChecked="True" />
                        <ContentControl Width="40"></ContentControl>
                        <RadioButton x:Name="OptGenderFemale"
                                     Content="Female"
                                     Foreground="Blue" />
                    </StackPanel>
                </Border>
                <!--
                日期类型信息通常居中
                用TextBox, 命名加前缀Inp
                可编辑时为白底蓝字
                -->
                <TextBlock Grid.Row="6"
                           Grid.Column="1"
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
                           Margin="2"
                           Text="Birth Date: "></TextBlock>
                <TextBox x:Name="InpBirthDate"
                         Grid.Row="6"
                         Grid.Column="2"
                         Margin="2"
                         Foreground="Blue"
                         TextAlignment="Center"
                         Text="1965-05-18"></TextBox>
                <!--
                多选类型信息通常
                用CheckBox组合, 命名加前缀Chk
                可编辑时为白底蓝字
                -->
                <TextBlock Grid.Row="7"
                           Grid.Column="1"
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
                           Margin="2"
                           Text="Interest: "></TextBlock>
                <Border Grid.Row="7"
                        Grid.Column="2"
                        Margin="2"
                        CornerRadius="2"
                        BorderBrush="Silver"
                        BorderThickness="1">
                    <StackPanel VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Orientation="Horizontal">
                        <CheckBox x:Name="ChkInterestHouse"
                                  Content="House"
                                  Foreground="Blue"
                                  IsChecked="True"></CheckBox>
                        <ContentControl Width="5"></ContentControl>
                        <CheckBox x:Name="ChkInterestBeauty"
                                  Content="Beauty"
                                  Foreground="Blue"></CheckBox>
                        <ContentControl Width="5"></ContentControl>
                        <CheckBox x:Name="ChkInterestSon"
                                  Content="Son"
                                  Foreground="Blue"></CheckBox>
                        <ContentControl Width="5"></ContentControl>
                        <CheckBox x:Name="ChkInterestMoney"
                                  Content="Money"
                                  Foreground="Blue"></CheckBox>
                        <ContentControl Width="5"></ContentControl>
                        <CheckBox x:Name="ChkInterestCar"
                                  Content="Car"
                                  Foreground="Blue"></CheckBox>
                    </StackPanel>
                </Border>
                <!--
                数字类型信息通常
                用TextBox, 命名加前缀Inp
                可编辑时为白底蓝字
                -->
                <TextBlock Grid.Row="8"
                           Grid.Column="1"
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
                           Margin="2"
                           Text="Average Score: "></TextBlock>
                <TextBox x:Name="InpScore"
                         Grid.Row="8"
                         Grid.Column="2"
                         Margin="2"
                         Foreground="Blue"
                         TextAlignment="Right"
                         Text="85.00"></TextBox>
                <!--
                图片类型信息通常
                用Image+Button组合, 命名加前缀Img + Btn
                其中功能按钮大小一般为50*20。
                -->
                <TextBlock Grid.Row="9"
                           Grid.Column="1"
                           Margin="2"
                           HorizontalAlignment="Right"
                           VerticalAlignment="Center"
                           Text="Photo: "></TextBlock>
                <Grid  Grid.Row="9"
                       Grid.Column="2"
                       Margin="2">
                    <Border BorderBrush="Gray"
                            CornerRadius="2"
                            BorderThickness="1"></Border>
                    <Image x:Name="ImgPhoto"
                           Grid.Row="2"
                           Margin="2"></Image>
                    <StackPanel Grid.Row="0"
                                Orientation="Horizontal"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Top"
                                Margin="2">
                        <Button x:Name="BtnPhotoLoad"
                                Width="50"
                                Height="20"
                                Content="Load"
                                ToolTipService.ToolTip="Load Student's Photo."></Button>
                        <ContentControl Width="2"></ContentControl>
                        <Button x:Name="BtnPhotoClear"
                                Width="50"
                                Height="20"
                                Content="Clear"
                                ToolTipService.ToolTip="Clear Student's Photo"></Button>
                    </StackPanel>
                </Grid >

            </Grid>
            <!--
            装饰线区域
            -->
            <Grid Grid.Row="2"
                  Margin="2">
                <!--
                装饰线一般为1个像素高度,宽度充满,颜色会灰色
                -->
                <Rectangle Grid.Row="3"
                           Height="1"
                           Fill="Gray"
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Center"></Rectangle>
            </Grid>
            <!--
            命令按钮区域
            -->
            <Grid Grid.Row="3"
                  Margin="2"
                  HorizontalAlignment="Right"
                  VerticalAlignment="Center">
                <!--
                主要功能性命令按钮大小一般为70*26,加前缀Cmd。

                注意:不再主要命令区域出现的按钮,用Btn,小按钮。
                -->
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="CmdUpdate"
                            Width="70"
                            Height="24"
                            FontWeight="Bold"
                            Content="Update"
                            ToolTipService.ToolTip="Update Student's Information"></Button>
                    <ContentControl Width="4"></ContentControl>
                    <Button x:Name="CmdCancel"
                            Width="70"
                            Height="26"
                            FontWeight="Bold"
                            Content="Cancel"
                            ToolTipService.ToolTip="Cancel Current Editting, Return To Main Menu."></Button>
                </StackPanel>
            </Grid>

        </Grid>
    </UserControl>

    • 已更改类型 Mog Liang 2010年9月27日 3:27
    2010年9月17日 13:26