如何在WPF中创建多页面的UserControl？

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

由帆布，并设置ClipToBounds属性：

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

而且你要设置这些网格的Height财产三列没有任何内容。仅将背景设置为ImageBrush不会影响网格的大小。结果是三个网格有Width=286（由858除以三列产生），但左右网格有Height=0，因为它们没有内容。中间一个从包含的标签中获取高度，因此可见。

除了设置ImageBrush，您还可以将Image控件放在每个Grid表格中。因此三个网格的高度将自动设置。

当然，ClipToBounds也适用于网格，但似乎当RenderTransform应用于该内容时，网格不会重新渲染其内容的任何以前不可见的部分。

当使用画布时，您也可以考虑为Canvas.Left属性设置动画，而不是使用TranslateTransform。

编辑：这里是我的测试程序中的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))); 
      }; 
    } 
}