WPFで複数ページのUserControlを作成するには？

Question

私は3つの異なるページを含み、それぞれ異なるコンテンツを表示するユーザーコントロールを作成しようとしています。私の考えは、ユーザーコントロールのメイングリッドを作成し、その後、幅が3倍に設定された別のグリッドを作成し、その中に3つの列を作成することでした。次に、各ページコンテンツをラップして、各列のグリッドを作成します。次に、2つのボタンを作成してページをスライドさせ、変換変換アニメーションでそれらを変更します。

私は大丈夫でしたが、予想通りにスライドが機能しません。グリッドが翻訳されると、新しいページの内容は表示されず、もう一方のページはユーザーコントロール。

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

コードが単純化であった：次のように

コードであります私はそれが全体のものをilustratesだと思います。このグリッドはどのように処理できますか？私がここで意図したことをするための他の方法はありますか？また、あなたがそれらのグリッドのHeightプロパティを設定する必要が

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

：

おかげ

Answer 1

はキャンバスで

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

トップレベルのグリッドを交換し、ClipToBoundsプロパティを設定します3つの列には内容がありません。 BackgroundのみをImageBrushに設定しても、グリッドのサイズには影響しません。その結果、3つのグリッドはWidth=286（858を3つの列で割った結果）ですが、グリッドには内容がないのでHeight=0があります。中央のラベルは、ラベルに含まれるラベルからその高さを取得するため、表示されます。

ImageBrushを設定する代わりに、各列のグリッドにImageコントロールを配置することもできます。したがって、3つのグリッドの高さは自動的に設定されます。

もちろん、ClipToBoundsもグリッドで動作しますが、そのコンテンツにRenderTransformが適用されていると、目に見えない部分が再描画されないようです。

キャンバスを使用する場合は、TranslateTransformを使用する代わりにCanvas.Leftプロパティをアニメーション化することも考えられます。

編集：ここに私のテストプログラムから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))); 
      }; 
    } 
}