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

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

Конечно, ClipToBounds также работает с Grid, но кажется, что Grid не будет перерисовывать ранее невидимые части его содержимого, когда к этому содержимому применяется 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)));
            };
    }
}