5

私は、TabControlそれぞれTabItemがそのContent要素として個別のコントロールを持っている場所を持っています。UserControl.Loadedこれで、 EventTriggerを使用して、タブに切り替えるときにストーリーボードを簡単に実行できるようになりました。ただし、あるタブから別のタブに切り替えるときに、終了アニメーションも実行したいと考えています (つまり、古いコンテンツ コントロールをアニメーション化してから、新しいコンテンツ コントロールの開始アニメーションを実行できるようにします)。

標準の WPF コンストラクトでこれを行うことは可能ですか?

そうでない場合、これを処理するカスタム ソリューションを開発するにはどうすればよいでしょうか?

編集: 先に進み、次のようにベース TabControl を拡張し、そのOnSelectionChangedメソッドをオーバーライドする変更された TabControl を作成しました。

protected override void OnSelectionChanged(SelectionChangedEventArgs e)
{
    if (e.AddedItems.Count == 1 && e.RemovedItems.Count == 1)
    {
        var oldTab = e.RemovedItems[0] as TabItem;

        if (oldTab != null)
        {
            var exitStoryboard = /** code to find the storyboard **/
            if (exitStoryboard != null)
            {
                exitStoryboard.Completed = (_, __) => base.OnSelectionChanged(e);
                exitStoryboard.Begin();
                return;
            }
        }
    }
    base.OnSelectionChanged(e);
}

おそらくストーリーボードがアクティブでなくなったため、base.OnSelectionChangedが呼び出されることはありません。チップ？

4

3 に答える 3

1

これは2つのタブの解決策です.一般的な考え方は、選択が変更された後に最後のタブの画像をポップアップし、現在のタブをフェードインすることです.

ここで使用されているハードコードされた「その他」タブの代わりに、プロパティ内の VisualBrush の最後のタブを追跡することで、少し努力すれば、おそらく任意の数のタブに対してジェネリック化できます。

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <TabControl>
      <TabItem x:Name="tab1" Header="Tab 1">
         <Border Background="Transparent">
            <Grid>
               <TextBlock FontSize="40" Foreground="Red" Text="Tab 1 Contents">
                  <TextBlock.Triggers>
                     <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                           <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
                                 <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0"/>
                              </DoubleAnimationUsingKeyFrames>
                              <DoubleAnimation
                                 Duration="0:0:0.25"
                                 From="1"
                                 Storyboard.TargetName="tab2Shadow"
                                 Storyboard.TargetProperty="Opacity"
                                 To="0"/>
                              <DoubleAnimation
                                 BeginTime="0:0:0.25"
                                 Duration="0:0:0.25"
                                 From="0"
                                 Storyboard.TargetProperty="Opacity"
                                 To="1"/>
                           </Storyboard>
                        </BeginStoryboard>
                     </EventTrigger>
                  </TextBlock.Triggers>
               </TextBlock>
               <Rectangle x:Name="tab2Shadow">
                  <Rectangle.Fill>
                     <VisualBrush
                        AlignmentX="Left"
                        AlignmentY="Top"
                        AutoLayoutContent="False"
                        Stretch="None"
                        Visual="{Binding ElementName=tab2, Path=Content}"/>
                  </Rectangle.Fill>
               </Rectangle>
            </Grid>
         </Border>
      </TabItem>
      <TabItem x:Name="tab2" Header="Tab 2">
         <Border Background="Transparent">
            <Grid>
               <TextBlock FontSize="40" Foreground="Red" Text="Tab 2 Contents">
                  <TextBlock.Triggers>
                     <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                           <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
                                 <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0"/>
                              </DoubleAnimationUsingKeyFrames>
                              <DoubleAnimation
                                 Duration="0:0:0.25"
                                 From="1"
                                 Storyboard.TargetName="tab1Shadow"
                                 Storyboard.TargetProperty="Opacity"
                                 To="0"/>
                              <DoubleAnimation
                                 BeginTime="0:0:0.25"
                                 Duration="0:0:0.25"
                                 From="0"
                                 Storyboard.TargetProperty="Opacity"
                                 To="1"/>
                           </Storyboard>
                        </BeginStoryboard>
                     </EventTrigger>
                  </TextBlock.Triggers>
               </TextBlock>
               <Rectangle x:Name="tab1Shadow">
                  <Rectangle.Fill>
                     <VisualBrush
                        AlignmentX="Left"
                        AlignmentY="Top"
                        AutoLayoutContent="False"
                        Stretch="None"
                        Visual="{Binding ElementName=tab1, Path=Content}"/>
                  </Rectangle.Fill>
               </Rectangle>
            </Grid>
         </Border>
      </TabItem>
   </TabControl>
</Grid>
于 2012-08-24T18:40:09.730 に答える
0

TabControl.SelectionChanged イベントを使用できます。

于 2012-08-17T18:36:38.087 に答える
0

タブコントロールのカスタム スタイルを定義し、Selector.SelectionChanged RoutedEvent でアニメーションを実行できます。

        <Style x:Key="{x:Type TabControl}"
           TargetType="TabControl">
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabControl">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="40" />
                            <RowDefinition />
                        </Grid.RowDefinitions>

                        <UniformGrid Grid.Row="0"
                                     Rows="1"
                                     IsItemsHost="True" />
                        <ContentPresenter x:Name="TabContent"
                                          Grid.Row="2"
                                          Content="{TemplateBinding SelectedContent}">

                        </ContentPresenter>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Selector.SelectionChanged">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation From="0"
                                                     To="1"
                                                     Storyboard.TargetProperty="Opacity"
                                                     Storyboard.TargetName="TabContent"
                                                     Duration="0:0:0.5" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
于 2012-08-21T09:46:06.260 に答える