WPF中重复应用Border样式导致Grid布局异常的问题求助

嘿，这个问题的根源其实就在你定义的BorderTextBlockStyle里！你在Style里加了这两个Setter：

<Setter Property="Grid.Column" Value="{Binding}"/>
<Setter Property="Grid.Row" Value="{Binding}"/>

这里的{Binding}是无目标的绑定——它没有指定要绑定的数据源和路径，默认会绑定到Border的DataContext。而你的场景里DataContext大概率是窗口本身或者null，最终所有应用这个Style的Border都会拿到默认的0值作为Grid.Column和Grid.Row，所以第二个Border就跑到(0,0)的位置和第一个重叠了。

另外还有个小问题：你把Grid.Column和Grid.Row设置在了TextBlock上，但TextBlock是Border的子元素，不是Grid的直接子元素——Grid只会识别自己直接子元素的附加属性，TextBlock上的这些设置其实是无效的。

要让Border样式能多次复用，咱们需要把布局相关的属性（Grid.Column/Row）从Style里剥离，因为这些是每个Border独有的布局配置，不应该放在通用Style里。具体步骤如下：

1. 修改Style，移除无效的Grid布局Setter #

保留样式中通用的视觉属性，去掉布局相关的Setter：

<Style x:Key="BorderTextBlockStyle" TargetType="{x:Type Border}">
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="CornerRadius" Value="5"/>
    <!-- 移除Grid.Column和Grid.Row的Setter，让每个Border自己配置布局 -->
</Style>

2. 为每个Border直接设置Grid布局属性 #

把原来TextBlock上的Grid.Column和Grid.Row移到Border标签上（因为Border才是Grid的直接子元素），同时去掉TextBlock上无效的Grid属性：

<Grid VerticalAlignment="Top">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <!-- 第一个Border：指定Grid位置 -->
    <Border Style="{StaticResource BorderTextBlockStyle}" Grid.Column="0" Grid.Row="0">
        <TextBlock Text="Firstname" Style="{StaticResource GridTitleStyle}"/>
    </Border>
    <!-- 第二个Border：指定不同的Grid位置 -->
    <Border Style="{StaticResource BorderTextBlockStyle}" Grid.Column="1" Grid.Row="0">
        <TextBlock Text="Lastname" Style="{StaticResource GridTitleStyle}"/>
    </Border>
    <!-- 你要添加的(0,1)位置的Border，直接复用Style就行 -->
    <Border Style="{StaticResource BorderTextBlockStyle}" Grid.Column="0" Grid.Row="1">
        <TextBlock Text="Age" Style="{StaticResource GridTitleStyle}"/>
    </Border>
</Grid>

这样修改后，每个Border都能正确占据Grid的指定单元格，同时复用同一个Border样式，完美解决你的问题！

内容的提问来源于stack exchange，提问作者DukeNugGet