WPF中的模板样式

时间:2017-05-04 19:01:18

标签: c# wpf

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

enter image description here

TEXT 1到6包含border = 1

的边框

所以我使用Grid

开发了这个任务

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,单独的块如上图

1 个答案:

答案 0 :(得分:1)

以下是使用Labels而不是TextBoxes执行此操作的方法。标签可以有边框。

正如你所看到的,这里的麻烦是有些边界加倍了。但是你已经遇到了这个问题。

请注意,对于Label,您将内容放在Content属性而不是Text中,就像TextBlocks一样。

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