为什么我的样式在WPF中设置用户按钮控件内容时消失了？

Posted 2021-04-16

请为我的英语弱点道歉。我是WPF的新手，我在这里有一个问题标题。我尝试将WPF用户控件实现为按钮。但是当我想使用我的应用程序上的按钮时。我收到了错误。这是我的代码和错误。

用户控制XAML代码：

    <UserControl x:Class="AADControls.Buttons.Warning"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:AADControls.Buttons"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <LinearGradientBrush x:Key="aad-warning-back-brush" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FFF0F200"/>
            <GradientStop Offset="1" Color="#FFFF8800"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="aad-warning-border-brush" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FFF0F200"/>
            <GradientStop Offset="1" Color="#FFFF8800"/>
        </LinearGradientBrush>
    </UserControl.Resources>
    <Button Name="BtnWarning" Width="250" Height="50" 
            Content="AAD Button">
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="AADBorder" 
                                CornerRadius="10" 
                                BorderThickness="4" 
                                BorderBrush="{StaticResource aad-warning-border-brush}" 
                                Background="{StaticResource aad-warning-back-brush}">
                    <ContentPresenter Content="{TemplateBinding Content}" 
                                      HorizontalAlignment="Center" 
                                      VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsMouseCaptured" Value="true">
                        <Setter Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect Opacity="0.8" Direction="135"  
                             ShadowDepth="3" BlurRadius="1" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>
</UserControl>

我的用户控制用法：

<Window x:Class="DepaSOS.Pages.wndInitialize"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:AAD="clr-namespace:AADControls.Buttons;assembly=AADControls"
    xmlns:local="clr-namespace:DepaSOS.Pages"
    mc:Ignorable="d"
    Title="launch-n-Initialization"

    WindowStartupLocation="{StaticResource WSL}">



    <AAD:Warning Grid.Row="11" Grid.ColumnSpan="3"/>

现在的问题是直到我使用

<AAD:Warning Grid.Row="11" Grid.ColumnSpan="3"/>

每件事都没问题，显示的内容是默认内容，在用户控件中设置。我的控件的外观如下图所示：

但是，如果我只是像这样添加内容属性到我的按钮

<AAD:Warning Grid.Row="11" Grid.ColumnSpan="3" Content="Bla Bla Bla"/>

，关于风格的每件事都出错了，如图：

答案

<UserControl>...</UserControl>元素中的XAML是UserControl的内容。默认情况下，它包含一个Button。您正在用文本替换按钮，因此您可以看到文本而不是按钮。你没有失去按钮的风格。你丢失了整个按钮。

您没有做任何可能将usercontrol的内容放在按钮内的内容。如果你想这样做，你想设置UserControl的模板：模板决定了内容的呈现方式（你自己的按钮模板就是这样说明的）。像这样：

<UserControl 
    x:Class="AADControls.Buttons.Warning"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:local="clr-namespace:AADControls.Buttons"
    mc:Ignorable="d" 
    d:DesignHeight="300" d:DesignWidth="300"
    Content="AAD Button"
    >
    <UserControl.Resources>
        <LinearGradientBrush x:Key="aad-warning-back-brush" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FFF0F200"/>
            <GradientStop Offset="1" Color="#FFFF8800"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="aad-warning-border-brush" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FFF0F200"/>
            <GradientStop Offset="1" Color="#FFFF8800"/>
        </LinearGradientBrush>
    </UserControl.Resources>

    <!-- This template contains the XAML you had for the Content. -->
    <UserControl.Template>
        <ControlTemplate TargetType="UserControl">
            <Button 
                Name="BtnWarning" 
                Width="250" 
                Height="50" 
                Content="{TemplateBinding Content}"
                >
                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border 
                            Name="AADBorder" 
                            CornerRadius="10" 
                            BorderThickness="4" 
                            BorderBrush="{StaticResource aad-warning-border-brush}" 
                            Background="{StaticResource aad-warning-back-brush}"
                            >
                            <ContentPresenter 
                                Content="{TemplateBinding Content}" 
                                HorizontalAlignment="Center" 
                                VerticalAlignment="Center"
                                />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsMouseCaptured" Value="true">
                                <Setter Property="Effect">
                                    <Setter.Value>
                                        <DropShadowEffect 
                                            Opacity="0.8" 
                                            Direction="135"  
                                            ShadowDepth="3" 
                                            BlurRadius="1" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

请注意以下几点：

1. 您对内容的XAML现在都在UserControl的ControlTemplate中
2. Content的Button现在是Content="{TemplateBinding Content}"。这意味着，“查找模板应用于的控件的Content属性，并在此处使用其值。”
3. 我们现在将UserControl的Content属性设置为“AAD Button” - 您以前分配给按钮内容的文本。 Content="AAD Button" 这将是usercontrol的默认内容，除非您为其提供一些不同的内容，否则它将显示在按钮中。例如，在这里，您将为其提供内容“Bla Bla Bla”，该内容将显示在按钮中。 <AAD:Warning Grid.Row="11" Grid.ColumnSpan="3" Content="Bla Bla Bla"/>