Question

我有两个按钮，xaml中的代码是：

        <Button Grid.Row="0" Grid.Column="2" Style="{StaticResource styleInfomationButton}" />
        <Button Grid.Row="1" Grid.Column="2" Style="{StaticResource styleInfomationButton}" />

它们的风格相同，但在运行时它们的呈现方式不同：

这里是图片表格的显示方式：

应用样式：

    <Style x:Key="styleInfomationButton" TargetType="Button">
        <Setter Property="Width" Value="22" />
        <Setter Property="Height" Value="22" />
        <Setter Property="Content">
            <Setter.Value>
                <TextBlock FontWeight="ExtraBold" Foreground="White">?</TextBlock>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid Width="20" Height="20">
                        <Ellipse Fill="#81A9F0" />
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

当我尝试上面的代码时，它在运行时因错误而失败：

指定的元素已经是另一个元素的逻辑子元素。首先断开连接

然后，我再次查看代码，看到你在样式中设置了Content属性。当您尝试将Style应用于两个按钮时，WPF会尝试将相同的 TextBlock元素设置为Content两个按钮 - 这不起作用。在WPF中，对于任何元素，您只能有一个逻辑父元素。

将您的样式更新为以下内容，以获得所需的行为：

<Style x:Key="styleInfomationButton" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="22" />
    <Setter Property="Height" Value="22" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Width="20" Height="20">
                    <Ellipse Fill="#81A9F0" />
                    <<TextBlock FontWeight="ExtraBold" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center">?</TextBlock> 
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关于Understanding the Visual Tree and Logical Tree in WPF

的非常好的文章

WPF样式呈现不同，同时适用于多重控制

1 个答案: