WPF Expander ExpandDirection Problem

Kevin Marois

I have added an expander[^] vertically down the right side of my app. It looks fine like that. But when I expand it[^], it appears wrong. This [^]is how it should look. Here's my XAML:

Pete OHanlon

The problem is down to the fact that you have applied a rotation to your Header. It's always going to appear at 90 degrees. You could simply apply a trigger that fires off IsExpanded, and translation at that point.

Kevin Marois

I thought the same thing, but removing the rotation simply causes the header text to become horizontal. The header is still down the right side and the content still appears at the top. See this[^] and this[^].

If it's not broken, fix it until it is

Kevin Marois

This is pretty close[^], but there's still a problem:

        <Setter Property="Header" Value="My Stuff"/>
        <Style.Triggers>
            <Trigger Property="IsExpanded" Value="False">
                <Setter Property="Header" Value=""/>
            </Trigger>
        </Style.Triggers>
    


<Style.Triggers>
                    <DataTrigger Binding="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                                    Value="False">
                        <Setter Property="LayoutTransform">
                            <Setter.Value>
                                <RotateTransform Angle="90"/>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>

Now, the when expanded the header is at the top, and the content is below it. So far so good. However, when NOT expanded, the header text appears horizontal - the rotate isn't working. https://onedrive.live.com/redir?resid=F6FBCF1880A16630!238&authkey=!ANQDHrjshc7s5AI&v=3&ithint=photo%2Cpng Any idea what's wrong with the transform?

If it's not broken, fix it until it is

maddymaddy14

I have made some changes in your given xaml to make it working, Please refer the xaml code below: <Style.Triggers> <DataTrigger Binding="{Binding ElementName=MyExpander, Path=IsExpanded}" Value="False"> <Setter Property="Expander.ExpandDirection"> <Setter.Value> Left </Setter.Value> </Setter> </DataTrigger> <DataTrigger Binding="{Binding ElementName=MyExpander, Path=IsExpanded}" Value="True"> <Setter Property="Expander.ExpandDirection"> <Setter.Value> Down </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> <Style.Triggers> <DataTrigger Binding="{Binding ElementName=MyExpander, Path=IsExpanded}" Value="True"> <Setter Property="TextBlock.LayoutTransform"> <Setter.Value> <RotateTransform Angle="0"></RotateTransform> </Setter.Value> </Setter> </DataTrigger> <DataTrigger Binding="{Binding ElementName=MyExpander, Path=IsExpanded}" Value="False"> <Setter Property="TextBlock.LayoutTransform"> <Setter.Value> <RotateTransform Angle="90"></RotateTransform> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers>

maddymaddy14

I made some changes to the given xaml code to make it work... Hope the code snippet will help

<Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=MyExpander, Path=IsExpanded}" Value="False">
                    <Setter Property="Expander.ExpandDirection">
                        <Setter.Value>
                            Left
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding ElementName=MyExpander, Path=IsExpanded}" Value="True">
                    <Setter Property="Expander.ExpandDirection">
                        <Setter.Value>
                            Down
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        
    
    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=MyExpander, Path=IsExpanded}" Value="True">
                            <Setter Property="TextBlock.LayoutTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="0"></RotateTransform>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ElementName=MyExpander, Path=IsExpanded}" Value="False">
                            <Setter Property="TextBlock.LayoutTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="90"></RotateTransform>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>