如何将样式资源应用于该样式使用触发器应用模板的usercontrol?

时间:2012-10-03 03:44:40

标签: .net wpf xaml user-controls wpf-controls

如果这是一个简单的问题,我道歉,但我一直试图让这一天全部工作,我似乎无法想象一些可能相当明显的东西。

我有一个带有自定义依赖项属性“Flipped”的用户控件。

在我的资源中,我有一个定义了两个触发器的Style,它将控件的模板设置为两个不同的值,具体取决于'Flipped'是否为false。

现在,我使用什么语法将样式应用于我正在创建的用户控件?

Style="{StaticResource EventStyle}"放在UserControl的标题中将无效。

这是我到目前为止所做的:

<UserControl x:Class="XDPClient.Controls.EventMarkerControl"
         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:Controls="clr-namespace:XDPClient.Controls" 
         mc:Ignorable="d" 
         d:DesignHeight="513" d:DesignWidth="695">

<UserControl.Resources>
    <!-- Draw the user control right side up with this template -->
    <ControlTemplate x:Key="Up" TargetType="{x:Type Controls:EventMarkerControl}">
        <Grid>
            <!-- Outline grid  -->
            <Path Stretch="Fill" Fill="#FFFFFFFF" Stroke="#FF6800FF" StrokeThickness="3" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeMiterLimit="4" Name="rect2985" RenderTransformOrigin="0,0">
                <Path.Data>
                    <PathGeometry FillRule="Nonzero"   Figures="M 0,250 L 0,50 L 150,50 L 200,-0.96 L 250,50 L 400,50 L 400,250 L 0,250z" />
                </Path.Data>
            </Path>

            <!-- Placement of the content -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="4*" />
                </Grid.RowDefinitions>
                <Grid Grid.Row="1" Margin="3">
                    <ContentPresenter Grid.Row="1" 
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"        
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Grid>
            </Grid>

            <Grid.BitmapEffect>
                <DropShadowBitmapEffect />
            </Grid.BitmapEffect>
        </Grid>
    </ControlTemplate>

    <!-- Draw the user control flipped with this template -->
    <ControlTemplate x:Key="Down" TargetType="{x:Type Controls:EventMarkerControl}">
        <Grid>
            <!-- Outline grid  -->
            <Path Stretch="Fill" Fill="#FFFFFFFF" Stroke="#FF6800FF" StrokeThickness="3" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeMiterLimit="4" Name="rect2985" RenderTransformOrigin="0,0">
                <Path.Data>
                    <PathGeometry FillRule="Nonzero"   Figures="M 0,250 L 0,50 L 150,50 L 200,-0.96 L 250,50 L 400,50 L 400,250 L 0,250z" />

                </Path.Data>
                <Path.RenderTransform>
                    <ScaleTransform ScaleX="-1" />
                </Path.RenderTransform>
            </Path>

            <!-- Placement of the content -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="4*" />
                </Grid.RowDefinitions>
                <Grid Grid.Row="1" Margin="3">
                    <ContentPresenter Grid.Row="1" 
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"        
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Grid>
            </Grid>

            <Grid.BitmapEffect>
                <DropShadowBitmapEffect />
            </Grid.BitmapEffect>
        </Grid>
    </ControlTemplate>

    <Style x:Key="EventStyle" TargetType="{x:Type Controls:EventMarkerControl}">
        <Style.Triggers>
            <Trigger Property="Flipped" Value="false">
                <Setter Property="Template" Value="{StaticResource Up}" />
            </Trigger>
            <Trigger Property="Flipped" Value="true">
                <Setter Property="Template" Value="{StaticResource Down}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

1 个答案:

答案 0 :(得分:1)

您可以尝试让UserControl具有一个顶级子级,例如ContentControl,并将该样式应用于ContentControl。这样,你就不会得到递归。

编辑:以下内容来自原始提问者......

这是我尝试做你的建议。出于某种原因,我的DataTriggers从不应用模板....不知道我在这里做错了什么。

以下是整个XAML使用包含的ContentControl尝试它:

<UserControl x:Class="XDPClient.Controls.EventMarkerControl"
         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:Controls="clr-namespace:XDPClient.Controls" mc:Ignorable="d" 
         d:DesignHeight="513" d:DesignWidth="695"
         x:Name="uc">

<UserControl.Resources>
    <!-- Draw the user control right side up with this template -->
    <ControlTemplate x:Key="Up" TargetType="{x:Type ContentControl}">
        <Grid>
            <!-- Outline grid  -->
            <Path Stretch="Fill" Fill="#FFFFFFFF" Stroke="#FF6800FF" StrokeThickness="3" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeMiterLimit="4" Name="rect2985" RenderTransformOrigin="0,0">
                <Path.Data>
                    <PathGeometry FillRule="Nonzero"   Figures="M 0,250 L 0,50 L 150,50 L 200,-0.96 L 250,50 L 400,50 L 400,250 L 0,250z" />
                </Path.Data>
            </Path>

            <!-- Placement of the content -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="4*" />
                </Grid.RowDefinitions>
                <Grid Grid.Row="1" Margin="3">
                    <ContentPresenter Grid.Row="1" 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"        
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Grid>
            </Grid>

            <Grid.BitmapEffect>
                <DropShadowBitmapEffect />
            </Grid.BitmapEffect>
        </Grid>
    </ControlTemplate>

    <!-- Draw the user control flipped with this template -->
    <ControlTemplate x:Key="Down" TargetType="{x:Type ContentControl}">
        <Grid>
            <!-- Outline grid  -->
            <Path Stretch="Fill" Fill="#FFFFFFFF" Stroke="#FF6800FF" StrokeThickness="3" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeMiterLimit="4" Name="rect2985" RenderTransformOrigin="0,0">
                <Path.Data>
                    <PathGeometry FillRule="Nonzero"   Figures="M 0,250 L 0,50 L 150,50 L 200,-0.96 L 250,50 L 400,50 L 400,250 L 0,250z" />

                </Path.Data>
                <Path.RenderTransform>
                    <ScaleTransform ScaleX="-1" />
                </Path.RenderTransform>
            </Path>

            <!-- Placement of the content -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="4*" />
                </Grid.RowDefinitions>
                <Grid Grid.Row="1" Margin="3">
                    <ContentPresenter Grid.Row="1" 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"        
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Grid>
            </Grid>

            <Grid.BitmapEffect>
                <DropShadowBitmapEffect />
            </Grid.BitmapEffect>
        </Grid>
    </ControlTemplate>


</UserControl.Resources>

<ContentControl x:Name="ContentControl" >
    <!-- Style for the content control -->
    <ContentControl.Style>
            <Style TargetType="{x:Type ContentControl}">
            <Style.Triggers>
                <DataTrigger Value="False" Binding="{Binding ElementName=uc, Path=Flipped}">
                    <Setter Property="ContentControl.Template" Value="{StaticResource Up}" />
                </DataTrigger>
                <DataTrigger Value="True" Binding="{Binding ElementName=uc, Path=Flipped}">
                    <Setter Property="ContentControl.Template" Value="{StaticResource Down}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>
</UserControl>

如果我像这样手工应用这种风格:

    <ContentControl x:Name="ContentControl" Template="{StaticResource Up}">

看起来不错!只是我的数据触发器没有触发“翻转”的值