WPF CustomControl切换ContentControl的内容

Question

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfCustomControlLibrary1">

<ContentControl x:Key="BackSide" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Back}" RenderTransformOrigin="0.5,0.5">
    <ContentControl.RenderTransform>
        <ScaleTransform ScaleX="-1" />
    </ContentControl.RenderTransform>
</ContentControl>

<Style TargetType="{x:Type local:CustomControl1}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:CustomControl1}">
                <ContentControl Grid.Row="1">
                    <ContentControl.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform x:Name="tf" ScaleX="1" />
                        </TransformGroup>
                    </ContentControl.RenderTransform>
                    <ContentControl.Style>
                        <Style TargetType="ContentControl">
                            <Setter Property="Content" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Front}" />
                            <Style.Triggers>
                                <DataTrigger Value="True">
                                    <DataTrigger.Binding>
                                        <Binding ElementName="tf" Path="ScaleX">
                                            <Binding.Converter>
                                                <loc:LessThanXToTrueConverter X="0" />
                                            </Binding.Converter>
                                        </Binding>
                                    </DataTrigger.Binding>
                                    <DataTrigger.Setters>
                                        <Setter Property="Content" Value="{StaticResource BackSide}"/>
                                    </DataTrigger.Setters>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </ContentControl.Style>
                </ContentControl>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This is some XAML code from a customcontrol. Where there are two dependency properties (Front and Back).

Via my DataTrigger I want to change the Content of the ContentControl from using "Front" to using "Back". At first it shows the depencency property "Front" and then it should use the depencency property "Back" as the Content. This is done via this code:

<DataTrigger.Setters>
  <Setter Property="Content" Value="{StaticResource BackSide}"/>
</DataTrigger.Setters>

But this doesn't work...

I can bind and display the content of the Front dependency property in my control via:

<Setter Property="Content" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Front}" />

but I can't figure out how to bind the DataTrigger setter so that it uses the ContentControl's Content with the x:Key="BackSide" ContentControl.

Thanks in advance.

Answer 1

You said that this XAML works:

<Setter Property="Content" Value="{Binding RelativeSource={RelativeSource 
    TemplatedParent}, Path=Front}" />

So why don't you just try putting this XAML into your DataTrigger ?:

<Setter Property="Content" Value="{Binding RelativeSource={RelativeSource 
    TemplatedParent}, Path=Back}" />

---

UPDATE >>>

I'm not really sure what you're trying to do with your UIElement DependencyProperty s, but I am guessing that you are taking the wrong approach. Typically in WPF, our properties are data types, not UI types and then we generate UI types using DataTemplate s... perhaps you should re-think your approach.

Please see the Data Templating Overview page on MSDN for further help.

You might also find my answer to the WPF MVVM navigate views question helpful to read.