如何在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" ...>

为 Canvas 并设置 ClipToBounds 属性：

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

此外，您还必须设置三列中没有任何内容的网格的 Height 属性。仅设置 ImageBrush 的背景不会影响网格的大小。结果是三个 Grid 具有 Width=286（由 858 除以三列得出），但左右 Grid 具有 Height=0，因为它们没有内容。中间的标签从包含的标签中获取其高度，因此是可见的。

您还可以在每列网格中放置一个图像控件，而不是设置 ImageBrush。这样三个网格的高度就会自动设置。

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

使用 Canvas 时，您还可以考虑对 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)));
            };
    }
}