WPF CustomControl switch content of 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.

Did you also ensure the value is indeed true for your datatrigger? — Scott Nimrod, Mar 09 '15 at 13:48
If I set the Setter the same with the RelativeSource TemplatedParent just like the Front property (and as Sheridan suggests) I see content but my RenderTransform ScaleTransform is not applied. — juFo, Mar 09 '15 at 14:10

score 0 · Answer 1 · edited May 23 '17 at 10:09

0

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 DependencyPropertys, 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 DataTemplates... 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.

edited May 23 '17 at 10:09

Community

1
1

answered Mar 09 '15 at 13:55

Sheridan

68,826
24
143
183

I've already done this, but for some reason the RenderTransform / ScaleTransform is ignored in this case. Unless something extra is needed there? – juFo Mar 09 '15 at 14:05
The `RenderTransform` is ignored like this because we're referencing just the property and not the `ContentControl` in `Resources`. – Sheridan Mar 09 '15 at 14:09
Any code sample to explain this as I'm confused now. :s – juFo Mar 09 '15 at 14:12
There is a code example above. It references your `Back DependencyProperty`, *not* your `BackSide ContentControl`. – Sheridan Mar 09 '15 at 14:14
Ok I was confused. But if I reference BackSide I don't see any content. Why can't I use BackSide and its defined RenderTransform / ScaleTransform ? ContentControl itself is also a UIElement, just like the dep. property. – juFo Mar 09 '15 at 14:20
So your `DependencyProperty`s are of type `UIElement`? – Sheridan Mar 09 '15 at 14:29
Yes Front and Back are of type UIElement. – juFo Mar 09 '15 at 14:33
trying to convert the UserControl to a customcontrol: http://stackoverflow.com/a/6228730/187650 – juFo Mar 09 '15 at 14:39
I'm looking forward to see your solution where Front and Back are a container for other controls without using UIElements (just like http://stackoverflow.com/questions/6228190/wpf-control-flip/6228730#6228730 ) – juFo Mar 09 '15 at 15:51

WPF CustomControl switch content of ContentControl

1 Answers1