How to make a multipaged UserControl in WPF? - wpf

Question

I'm trying to make a user control which contains three different pages, each displaying different content. My idea was to make the following: create the user control main grid, then create another grid with the width set to three times the width of the user control or the main grid, and then create three columns in it. Then I would create a grid for each of the columns, wrapping each page content. Next, create two buttons to slide the pages, changing them through a translate transform animation.
I did it all right, but the sliding doesn't work as I expected: when the grid is translated, the content of the new page doesn't get displayed, and the other page keeps visible in the side of the user control.
The code is as follows:
.cs
private void TranslateMainGrid(bool right)
{
DoubleAnimation gridTranslateAnimation = new DoubleAnimation(); // Calculations not important
gridTranslateAnimation.From = right ? 0 - (this.SelectedPanel - 1) * 286 : 0 - (this.SelectedPanel + 1) * 286;
gridTranslateAnimation.To = 0 - this.SelectedPanel * 286;
gridTranslateAnimation.Duration
= new Duration(new TimeSpan(0, 0, 0, 0, 500));
TranslateTransform oTransform
= (TranslateTransform)PanelGrid.RenderTransform;
oTransform.BeginAnimation(TranslateTransform.XProperty,
gridTranslateAnimation);
}
.xaml
<Grid x:Name="MainGrid" Height="400" Width="286" Background="#7B9D9D9D" RenderTransformOrigin="0.5,0.5">
<Grid x:Name="PanelGrid" Height="400" Width="858" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TranslateTransform X="0"/>
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="ChimeraGrid" Grid.Column="0">
<Grid.Background>
<ImageBrush ImageSource="/GameView;component/Resources/arcaneCreature.png"/>
</Grid.Background>
</Grid>
<Grid x:Name="CreatureGrid" Grid.Column="1">
<Grid.Background>
<ImageBrush ImageSource="/GameView;component/Resources/chimeraTest.png"/>
</Grid.Background>
<Label Content="lolololol" Height="81" VerticalAlignment="Top" HorizontalAlignment="Right" Width="164"/>
</Grid>
<Grid x:Name="EquipmentGrid" Grid.Column="2">
<Grid.Background>
<ImageBrush ImageSource="/GameView;component/Resources/tribeCreature.png"/>
</Grid.Background>
</Grid>
</Grid>
</Grid>
The code was simplified, but I guess it ilustrates the whole stuff. How can I deal with this grids? Is there any other way to do what I intended here?
Thanks

Answer 1

Replace your top-level Grid
<Grid x:Name="MainGrid" Width="286" ...>
by a Canvas and set the ClipToBounds property:
<Canvas Name="MainCanvas" Width="286" ClipToBounds="True">
Moreover you have to set the Height property of those Grids in the three columns that don't have any content. Setting only the Background to an ImageBrush will not affect the Grid's size. The result is that the three Grids have Width=286 (resulting from 858 divided by three columns) but the left and right Grid have Height=0, because they have no content. The middle one gets its height from the contained Label and is hence visible.
Instead of setting an ImageBrush you could also put an Image control in each column Grid. Thus the heights of the three Grids would be set automatically.
Of course ClipToBounds also works with a Grid, but it seems that the Grid won't re-render any previously invisible parts of its content when a RenderTransform is applied to that content.
When using a Canvas you may also consider to animate the Canvas.Left property instead of using a TranslateTransform.
EDIT: Here is the XAML from my test program:
<Window x:Class="SlidingGrid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="400">
<Canvas Width="286" ClipToBounds="True" Margin="10">
<Grid Width="858" Name="grid" Canvas.Left="0" Height="400">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RenderTransform>
<TranslateTransform x:Name="slideTransform"/>
</Grid.RenderTransform>
<Grid Grid.Column="0">
<Grid.Background>
<ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" Stretch="UniformToFill"/>
</Grid.Background>
</Grid>
<Grid Grid.Column="1">
<Grid.Background>
<ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" Stretch="UniformToFill"/>
</Grid.Background>
</Grid>
<Grid Grid.Column="2">
<Grid.Background>
<ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" Stretch="UniformToFill"/>
</Grid.Background>
</Grid>
</Grid>
</Canvas>
</Window>
and the code:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Loaded += (o, e) =>
{
//grid.BeginAnimation(
// Canvas.LeftProperty,
// new DoubleAnimation(-572, TimeSpan.FromSeconds(2)));
slideTransform.BeginAnimation(
TranslateTransform.XProperty,
new DoubleAnimation(-572, TimeSpan.FromSeconds(2)));
};
}
}