Как сделать многостраничный UserControl в WPF?

Question

Я пытаюсь сделать пользовательский элемент управления, который содержит три разные страницы, каждый из которых отображает различный контент. Моя идея состояла в том, чтобы сделать следующее: создать основную сетку управления пользователя, затем создать другую сетку с шириной, установленной в три раза шириной пользовательского элемента управления или главной сеткой, а затем создать в ней три столбца. Затем я создам сетку для каждого из столбцов, обертывая каждое содержимое страницы. Затем создайте две кнопки для перемещения страниц, изменив их с помощью анимации трансляционного преобразования.

Я сделал все в порядке, но скольжение не работает, как я ожидал: когда сетка переведена, содержимое новой страницы не отображается, а другая страница остается видимой в стороне пользовательский контроль.

Код выглядит следующим образом:

.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> 

Код был упрощаются но я думаю, что это иллюстрирует весь материал. Как я могу справиться с этими сетками? Есть ли другой способ сделать то, что я намеревался здесь?

Благодаря

Answer 1

Замените Сетка

<Grid x:Name="MainGrid" Width="286" ...> 

верхнего уровня с помощью Canvas и установить ClipToBounds свойство:

<Canvas Name="MainCanvas" Width="286" ClipToBounds="True"> 

Кроме того, вы должны установить Height свойство этих сетках в три столбца, которые не имеют никакого контента. Установка только Background для ImageBrush не влияет на размер сетки. В результате три сетки имеют Width=286 (результат из 858 разделен на три столбца), но левая и правая сетка имеют Height=0, потому что у них нет контента. Середина получает свою высоту от содержащейся метки и, следовательно, видна.

Вместо установки ImageBrush вы также можете поместить элемент управления Image в каждый столбец Grid. Таким образом, высоты трех гридов будут установлены автоматически.

Конечно, ClipToBounds также работает с сеткой, но похоже, что Grid не будет повторно отображать ранее невидимые части его содержимого, когда RenderTransform применяется к этому контенту.

При использовании холста вы также можете рассмотреть возможность анимировать свойство Canvas.Left вместо использования TranslateTransform.

EDIT: Вот XAML из моей тестовой программы:

<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> 

и код:

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))); 
      }; 
    } 
}