Question

我正在尝试创建一个包含三个不同页面的用户控件，每个页面显示不同的内容。我的想法是做以下事情：创建用户控件主网格，然后创建另一个网格，其宽度设置为用户控件或主网格宽度的三倍，然后在其中创建三列。然后我会为每个列创建一个网格，包装每个页面内容。接下来，创建两个按钮以滑动页面，通过转换变换动画更改它们。

我做得很好，但是滑动不能像我预期的那样工作：当网格被翻译时，新页面的内容不会显示，而另一页面在用户侧面保持可见控制。

The problem!

代码如下：

的.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不会影响网格的大小。结果是三个网格具有Width=286（由858除以三列），但左右网格具有Height=0，因为它们没有内容。中间的一个从包含的标签中获取其高度，因此可见。

您也可以在每个Grid Grid中放置一个Image控件，而不是设置ImageBrush。因此，三个网格的高度将自动设置。

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

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

如何在WPF中进行多路UserControl？

1 个答案: