为什么我的ControlTemplate for Grid不起作用?

时间:2018-04-25 04:05:19

标签: wpf

我想将网格的ControlTemplate设置为如下所示: enter image description here

这是标记:

<Grid>
    <Grid.Style>
        <Style TargetType="Grid">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid ShowGridLines="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.1*"></ColumnDefinition>
                                <ColumnDefinition Width="0.8*"></ColumnDefinition>
                                <ColumnDefinition Width="0.1*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="0.1*"></RowDefinition>
                                <RowDefinition Height="0.8*"></RowDefinition>
                                <RowDefinition Height="0.1*"></RowDefinition>
                            </Grid.RowDefinitions>
                            <ContentPresenter Grid.Row="1" Grid.Column="1"></ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Style>
    <Border Background="Red"></Border>
</Grid>

我不知道为什么ControlTemplate不起作用。我的标记有问题吗?

1 个答案:

答案 0 :(得分:1)

Grid.RowDefinitionsGrid.ColumnDefinitions不是Dependency properties,无法通过Style设置。我想这就是你使用ControlTemplate而不是直接设置它的原因。但是ControlTemplate的{​​{3}}没有显示任何边框/行,因此您可能需要使用default Style(将其包裹在网格周围而不是网格内)。

此外:要将边框放置在网格的中心,您必须设置行和列,否则边框将分布在整个网格中。并将其放置在Controltemplate内部而不是在其外部的ContentPresenter处。

修改

由于评论中的澄清,我建议使用一个使用RenderTransform缩小内容的边框。

风格

    <Style x:Name="Shrink80pcBorder" TargetType="{x:Type Border}">
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform ScaleX="0.8" ScaleY="0.8"/>
            </Setter.Value>
        </Setter>
    </Style>

用法

    <Border Background="Red" Style="{StaticResource Shrink80pcBorder}">
        <Your Item/Content/>
    </Border>