Question

我是WPF的新手，我想创建一个模态弹出设置管理器。我的客户可以使用不同分辨率的应用程序。我还想稍后扩展我的设置管理器并添加更多字段（文本框等）。我已经创建了它的基本版本，但我不确定我是否遵循了设计布局的所有最佳实践（面板类型，元素的宽度/高度等）。我附上了我想要实现的截图，我也在附上这篇文章的XAML。如果我可以做任何改进布局（以使其更易于维护，因为我将很快添加更多这样的表格），我将非常感谢您的反馈。

注意：我知道我现在已经硬编码了文本（没有本地化支持等），但是现在我只关心布局。我非常感谢你的帮助。

<Window.Resources>

</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <TextBlock Width="350" VerticalAlignment="Top" Grid.Row="0" FontFamily="Microsoft Sans Serif" FontSize="11" Foreground="#FFFEFFFC" Text="This is the header containing information related to my dialogbox. It can be multiple lines aswell." Background="{StaticResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" TextWrapping="Wrap" Grid.ColumnSpan="3" Padding="5" />

    <GroupBox Grid.Row="1" Header="My Group Box" Margin="5" Padding="5">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition Height="auto"></RowDefinition>
            </Grid.RowDefinitions>


            <StackPanel  Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Left">
                <TextBlock VerticalAlignment="Center" Text="My Label1" />
                <Label DockPanel.Dock="Right" VerticalAlignment="Center" Foreground="Crimson" Content="*" />
            </StackPanel>

            <StackPanel Grid.Row="1" Orientation="Vertical">
                <TextBox TextWrapping="Wrap" Margin="0,0,0,0" MaxLength="255" />
                <TextBlock TextWrapping="Wrap" Visibility="Visible"  Margin="0,2,0,0" Name="labelError1" VerticalAlignment="Top" FontSize="10" Foreground="#FFD80000" Text="Error Message for my textbox1" MaxWidth="455"/>
            </StackPanel>

            <StackPanel  Grid.Row="2"  Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,10,0,0">
                <TextBlock VerticalAlignment="Center" Text="My Label 2" />
                <Label DockPanel.Dock="Right" VerticalAlignment="Center" Foreground="Crimson" Content="*"/>
            </StackPanel>
            <StackPanel Grid.Row="3" Orientation="Vertical">
                <TextBox TextWrapping="Wrap" Margin="0,0,0,0" MaxLength="255" />
                <TextBlock TextWrapping="Wrap" Visibility="Visible"  Margin="0,2,0,0" Name="label1" VerticalAlignment="Top" FontSize="10" Foreground="#FFD80000" Text="Error Message for my textbox2" MaxWidth="455"/>
            </StackPanel>

        </Grid>
    </GroupBox>

    <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0,10,10,10" HorizontalAlignment="Right" >
        <Button Name="OkButton" Width="88" Height="28"  IsDefault="True" Content="OK"  Command="{Binding Path=OkCommand, Mode=OneWay}" HorizontalAlignment="Right"  Margin="0,0,6,0"/>
        <Button Name="CancelButton" Width="88" Height="28" IsCancel="True" Content="Cancel" HorizontalAlignment="Left" Margin="0"/>
    </StackPanel>
</Grid>

<Window xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"  
        x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="My Settings Manager" 
        SizeToContent="Height"
        Background="#ffe6e6e6"
        MinWidth="350"
        MinHeight="290"
        Width="350"
        >

    <Window.Resources>

    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock VerticalAlignment="Top" Grid.Row="0" FontFamily="Microsoft Sans Serif" FontSize="11" Foreground="#FFFEFFFC" Text="This is the header containing information related to my dialogbox. It can be multiple lines aswell." Background="{StaticResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" TextWrapping="Wrap" Grid.ColumnSpan="3" Padding="5" />

        <GroupBox Grid.Row="1" Header="My Group Box" Margin="5" Padding="5">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="10"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="My Label1" />
                <TextBlock Grid.Row="0" Grid.Column="1" Foreground="Crimson" Text="*" Margin="4,2,0,0"/>
                <TextBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" TextWrapping="Wrap" Margin="0,0,0,0" MaxLength="255" />
                <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,2,0,0" Name="labelError1" VerticalAlignment="Top" FontSize="10" Foreground="#FFD80000" Text="Error Message for my textbox1" />

                <TextBlock Grid.Row="4" Grid.Column="0" VerticalAlignment="Center" Text="My Label1"  />
                <TextBlock Grid.Row="4" Grid.Column="1" Foreground="Crimson" Text="*" Margin="4,2,0,0"/>
                <TextBox Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" TextWrapping="Wrap" Margin="0,0,0,0" MaxLength="255" />
                <TextBlock Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,2,0,0" Name="labelError2" VerticalAlignment="Top" FontSize="10" Foreground="#FFD80000" Text="Error Message for my textbox1" />
            </Grid>
        </GroupBox>

    <Button Grid.Row="2" Name="OkButton" Width="88"   IsDefault="True" Content="OK" Padding="0,3,0,3" Margin="0,5,5,5" HorizontalAlignment="Right"/>
    <Button Grid.Row="2" Name="CancelButton" Width="88" IsCancel="True" Content="Cancel"  Margin="0,5,100,5" Padding="0,3,0,3" HorizontalAlignment="Right"/>


    </Grid>
</Window>

Answer 1

有些事情对我很突出......

UI对象的通用名称。我讨厌看到名为label1，textbox1等的内容。要么将它们命名为描述性内容，要么根本不为它们指定名称。通常我不会命名任何东西，除非我需要在代码中的某处引用它。
您使用Grid表示行，然后使用Horizontal StackPanel表示列。为什么不在行和列中使用Grid？您的UI树中的对象将会减少，并且您的列将排成一行
您不需要设置很多默认设置。例如，默认情况下，控件为Visible，因此Visibility="Visible"似乎没必要，只是让代码更难阅读
您可以将某些常规内容放在样式中而不是<Tag>中，以便更轻松地阅读XAML。通常，我会尝试将所有样式属性（Margin，Height，Alignment等）放在<Style>标记中，并且只保留相关的布局属性（例如{{1}或者DockPanel.Dock）和数据（Grid.Column，Text，Tooltip等）在XAML正文中。

数据输入布局（XAML）

1 个答案: