WPF中的模板样式

Question

我是 WPF 新手并正在学习 WPF，我正在尝试创建一个具有以下属性的模板

TEXT 1 到 6 包含粗细=1 的边框

所以我使用网格开发了这个任务

XML

  <Border BorderBrush="Black" BorderThickness="1">
        <Grid>
            <Grid HorizontalAlignment="Left" Height="80" Margin="55,107,0,0" VerticalAlignment="Top" Width="183">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="54*"/>
                    <ColumnDefinition Width="68*"/>
                    <ColumnDefinition Width="61*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="22*"/>
                    <RowDefinition Height="31*"/>
                    <RowDefinition Height="27*"/>
                </Grid.RowDefinitions>
                <Border BorderThickness="1" BorderBrush="Black">
                    <TextBlock Grid.Row="0" Grid.Column="0"/>
                </Border>
                <Border Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" BorderThickness="1" BorderBrush="Black">
                <TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"/>
                </Border>
                <Border Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" BorderThickness="1" BorderBrush="Black">
                    <TextBlock Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"/>
                </Border>
                <Border Grid.Row="1" Grid.Column="1" BorderThickness="1" BorderBrush="Black">
                    <TextBlock Grid.Row="1" Grid.Column="1"/>
                </Border>
                <Border Grid.Row="1" Grid.Column="2" BorderThickness="1" BorderBrush="Black">
                    <TextBlock Grid.Row="1" Grid.Column="2"/>
                </Border>
                <Border Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" BorderThickness="1" BorderBrush="Black">
                    <TextBlock Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2"/>
                </Border>

            </Grid>
        </Grid>
    </Border>

有没有其他最佳方式来达到这个目的

将 TEXT 1-6 放置在边框粗细为 1 的位置，并带有单独的块，如上图

Answer 1

以下是使用标签而不是文本框的方法。标签可以有边框。

如您所见，这里的问题是某些边框会重叠。但是你已经遇到了这个问题。

请注意，使用 Label，您将内容放在 Content 属性中，而不是像在 TextBlocks 中那样的 Text。

<Border BorderBrush="Black" BorderThickness="1">
    <Grid>
        <Grid HorizontalAlignment="Left" Height="80" Margin="55,107,0,0" VerticalAlignment="Top" Width="183">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="54*"/>
                <ColumnDefinition Width="68*"/>
                <ColumnDefinition Width="61*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="22*"/>
                <RowDefinition Height="31*"/>
                <RowDefinition Height="27*"/>
            </Grid.RowDefinitions>

            <Grid.Resources>

                <!-- 
                Here's the 'local implicit style'. 
                "Implicit" means it has no x:Key property, so it will apply to 
                all Labels contained in the Grid here. 
                -->

                <Style TargetType="Label" BasedOn="{StaticResource {x:Type Label}}">
                    <Setter Property="BorderBrush" Value="Black" />
                    <Setter Property="BorderThickness" Value="1" />
                    <!-- 
                    Label has a nonzero default margin, we don't want that here. 
                    -->
                    <Setter Property="Margin" Value="0" />
                </Style>
            </Grid.Resources>

            <Label Grid.Row="0" Grid.Column="0"/>
            <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"/>
            <Label Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"/>
            <Label Grid.Row="1" Grid.Column="1"/>
            <Label Grid.Row="1" Grid.Column="2"/>
            <Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2"/>
        </Grid>
    </Grid>
</Border>