CODEWITHSUNDEEP
c#wpfsidebarexpander
user2268507
user2268507

Reputation:

WPF Expander to expand on far right side of application

I would like to alter my program so that when an image is clicked it reveals a sidebar on the far right side of the application.

I have currently been trying to achieve this using an Expander. This is what it looks like so far:

enter image description here

<Expander>
         <Expander.Header>
               <Image Width="200" Height="300" Source="{Binding image}"/>
         </Expander.Header>

         <i:Interaction.Behaviors>
            <local:UniqueNameBehavior ID="{Binding id}"/>
         </i:Interaction.Behaviors>

         <StackPanel Margin="10,4,0,0">
               <ToggleButton Margin="4" Content="Option 1" Template="{StaticResource SimpleExpanderButtonTemp}"/>
                <ListView>
                     <TextBox Text="Search" />
                 </ListView>
         </StackPanel>
</Expander>

The idea is that whenever any movie is clicked, a sidebar on the far right side of the app is revealed containing info about the movie. If another movie is subsequently clicked, the sidebar will now contain info about the new movie.

I know that it is possible to change the ExpandDirection, but this only results in the content appearing beside the image as opposed to the far right of the application.

I've also tried adjusting the Margin of StackPanel but this results in the surrounding movies being pushed aside.

Could someone please help me out with how I can achieve this?

Thank you for your help!

Upvotes: 0

Views: 1029

Answers (1)

Natan
Natan

Reputation: 1885

I don't believe this kind of behaviour can be achieved using expanders the way you are using. Why don't you create a grid on the far right side of your app with its width set to 0 and when you click/select a movie it sets the grid width to a new value and change its content based on the movie?

<Grid HorizontalAlignment="Right">
<Grid.Style>
    <Style TargetType="Grid">
        <Setter Property="Width" Value="0"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding ShowMovieForm}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetProperty="Width" To="400" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetProperty="Width" To="0" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Grid.Style>
</Grid>

Upvotes: 1

Related Questions