WPF 用户控件模板被内容覆盖

[stonemqy]

我需要写一个自定义控件，类似于Expander，
由一个标题，一个箭头图标，和一个可以呈现控件内容的区域组成。
XAML代码如下：

<UserControl x:Class="WpfTest.Controls.ExpandablePanel"
             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:WpfTest.Controls"
             mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"
             Loaded="ExpandablePanel_OnLoaded">

    <UserControl.Resources>

        <Style x:Key="PathStyle" TargetType="Path">
            <Setter Property="Width" Value="20"/>
            <Setter Property="Height" Value="20"/>
            <Setter Property="Stroke" Value="Red"/>
            <Setter Property="StrokeThickness" Value="1"/>
            <Setter Property="Data" Value="M 5,10 10,5 15,10 M 5,15 10,10 15,15"/>
        </Style>

        <Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
            <Setter Property="IsThreeState" Value="False"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border x:Name="Bd" Margin="{TemplateBinding Padding}" BorderThickness="1" BorderBrush="Transparent">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Path Grid.Column="0" x:Name="Arrow" Style="{StaticResource PathStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" SnapsToDevicePixels="False"/>
                                <ContentPresenter Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" RecognizesAccessKey="True" SnapsToDevicePixels="True"/>
                            </Grid>
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter TargetName="Arrow" Property="LayoutTransform">
                                    <Setter.Value>
                                        <RotateTransform Angle="180"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="Arrow" Property="LayoutTransform">
                                    <Setter.Value>
                                        <RotateTransform Angle="180"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="Background" Value="AntiqueWhite"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

    <Border Name="Main">
        <Grid Margin="0">
            <Grid.RowDefinitions>
                <RowDefinition x:Name="Row0" Height="26"/>
                <RowDefinition x:Name="Row1" Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="Col0" Width="*"/>
                <ColumnDefinition x:Name="Col1" Width="26"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Name="HeaderBlock" Text="abcd"  FontFamily="微软雅黑" FontSize="11" Foreground="#333" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            <ToggleButton Grid.Row="0" Grid.Column="1" Name="ArrowButton" Style="{StaticResource ToggleButtonStyle}" Click="ArrowButton_OnClick"/>
            <AdornerDecorator Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Name="Ad">
                <ContentPresenter Name="Content" Margin="0" Content="{Binding Content}"/>
            </AdornerDecorator>
        </Grid>
    </Border>
</UserControl>

控件引用处我这样写的：

<controls:ExpandablePanel PanelHeader="aaa" Margin="5" BorderThickness="1" BorderBrush="Black">
            <Border BorderThickness="1" BorderBrush="Red" Margin="5"></Border>
        </controls:ExpandablePanel>

我的目的是将Border呈现到ContentPresenter 上，但是实际运行时，Border却覆盖了整个UserControl 模板了。

这个问题应该怎么解决啊

[exception92]

这不是个问题，压根就是这样显示的。指定了ExpandablePanel的内容，也就是相当于重新设置了UserControl的Content内容，它会覆盖Name为Main 的Border内容。 但是代码中没有看到任何设置border 为ContentPresenter内容的代码，就是简简单单的进行了嵌套。 应该增加一个表示ContentPresenter内容的依赖项属性，类似定义的PanelHeader。

[stonemqy]

引用 1 楼 duanzi_peng 的回复:

这不是个问题，压根就是这样显示的。指定了ExpandablePanel的内容，也就是相当于重新设置了UserControl的Content内容，它会覆盖Name为Main 的Border内容。 但是代码中没有看到任何设置border 为ContentPresenter内容的代码，就是简简单单的进行了嵌套。 应该增加一个表示ContentPresenter内容的依赖项属性，类似定义的PanelHeader。

不是这样的，这个问题找到解决思路了。是我用错基类了。这里不应该用用户控件，应该用自定义控件。然后再项目的Themes/Generic.xaml下添加控件的默认样式。