Why my styles gone when set user button control content in WPF?

Question

please apologize me for my weakness in English. I'm new to WPF , And i have a issue here as question title. I tried to Implement a WPF User Control as button. but when i want to use the button on my app. i got error. here is my code & error.

User Control XAML Code :

    <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>

My Usage of User Control :

<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"/>

Now the problem is Until i Use

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

Every thing is ok and the content shown is a default content, which set in the user control.The appearance of my control is like this Image :

But, If i just add Content Property to my button like this

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

, every things about style goes wrong like this Image :

Answer 1

The XAML inside the <UserControl>...</UserControl> element is the Content of the UserControl. By default, it contains a Button. You are replacing the button with text, so you see the text instead of the button. You aren't losing the button's style. You're losing the whole button.

You are doing nothing that could possibly place the Content of the usercontrol inside a button. If you want to do that, you want to set the UserControl's template: The template determines how the content is presented (your own button template demonstrates just that). Like this:

<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>

Notice a few things:

1. The XAML you had for the content is now all in the UserControl's ControlTemplate
2. The Content of the Button is now Content="{TemplateBinding Content}". That means, "Find the Content property of the control the template is applied to, and use its value here."

3. We are now setting the Content property of the UserControl to "AAD Button" -- the text you formerly were assigning to the button's content.

   Content="AAD Button"
   

   That will be the default content of the usercontrol, which will be displayed in the button unless you give it some different content. Here, for example, you're giving it the content "Bla Bla Bla", which will be displayed in the button.

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