Question

我正在尝试向网格行添加双边框，因此模拟窗口内的凹陷面板。

这是我到目前为止所看到的，它看起来很接近我想要的东西。

<Grid Grid.Column="1" Grid.ColumnSpan="2">
            <Border x:Name="TopShadowBorder" 
                    BorderBrush="#FFB7B6B6" BorderThickness="2,3,2,0" 
                    Padding="0" CornerRadius="5 5 20 20" ClipToBounds="True" Margin="-1,0,1,0" Panel.ZIndex="2">
                <Border.Effect>
                    <DropShadowEffect Direction="270" ShadowDepth="2" />
                </Border.Effect>
            </Border>
                <Border x:Name="InsetBorder" BorderBrush="#FFF7F7F7" BorderThickness="2,0,2,3" 
                    CornerRadius="10" Margin="0" Panel.ZIndex="2"/>
            </Grid>

是否有可能将其转换为其他网格共享的样式？像这样的东西？

<Grid Grid.Column="1" Grid.ColumnSpan="2" Style={StatisResource SunkenBorder}></Grid>

Answer 1

网格是一个面板，您无法为面板设置模板（更改元素的外观）。您可以使用Contentcontrol

更改面板的模板

<Window.Resources>
   <ControlTemplate x:Key="GridBorderTemplate">
        <Grid>
            <Border x:Name="TopShadowBorder" 
                BorderBrush="#FFB7B6B6" BorderThickness="2,3,2,0" 
                Padding="0" CornerRadius="5 5 20 20" ClipToBounds="True" Margin="-1,0,1,0" Panel.ZIndex="2">
                <Border.Effect>
                    <DropShadowEffect Direction="270" ShadowDepth="2" />
                </Border.Effect>
            </Border>
            <Border x:Name="InsetBorder" BorderBrush="#FFF7F7F7" BorderThickness="2,0,2,3" CornerRadius="10" Margin="0" Panel.ZIndex="2"/>
        </Grid>
    </ControlTemplate>
</Window.Resources>

<Grid Height="300" Width="300">
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <ContentControl   Template="{StaticResource GridBorderTemplate}">
        <Grid></Grid>
    </ContentControl>
    <ContentControl Grid.Row="1" Grid.Column="1" Template="{StaticResource GridBorderTemplate}">
        <Grid></Grid>
    </ContentControl>
</Grid>

Answer 2

不幸的是，我无法使用@Heena Patil的答案，因为没有ContentPresenter。我采用了基于样式而不是this stack overflow question

中的模板的解决方案

  <Window.Resources>
    <Style x:Key="SunkenBorder" TargetType="{x:Type ContentControl}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ContentControl">
            <Grid>
              <Border x:Name="TopShadowBorder" 
                BorderBrush="#FFB7B6B6" BorderThickness="2,3,2,0" 
                Padding="0" CornerRadius="5 5 20 20" ClipToBounds="True" Margin="-1,0,1,0" Panel.ZIndex="2">
                <Border.Effect>
                  <DropShadowEffect Direction="270" ShadowDepth="2" />
                </Border.Effect>
              </Border>
              <Border x:Name="InsetBorder" BorderBrush="#FFF7F7F7" BorderThickness="2,0,2,3" CornerRadius="10" Margin="0" Panel.ZIndex="2"/>
              <ContentPresenter />
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>

  <ContentControl Style="{StaticResource SunkenBorder}">
    <Label>test</Label>
  </ContentControl>

使用样式向网格添加边框

2 个答案: