FlipView 样式和模板 来自msdn

本主题介绍  FlipView 控件的样式和模板。 你可以修改这些资源和默认  ControlTemplate 以便为该控件提供一个唯一的外观。

视觉状态

这些状态是在该控件的默认样式中定义的  VisualState

下表列出了翻转视图的视觉状态。

有关焦点状态的详细信息,请参阅  Control.FocusState

VisualState 名称VisualStateGroup 名称描述
FocusedFocusStates控件具有焦点。
UnfocusedFocusStates控件没有焦点。
PointerFocusedFocusStates控件具有通过指针操作获得的焦点。

 

下表列出了翻转视图的下一页和上一页按钮的视觉状态。

VisualState 名称VisualStateGroup 名称描述
NormalCommonStates默认状态。
PointerOverCommonStates指针置于控件上。
PressedCommonStates按下控件。

 

主题资源

这些资源在该控件的默认样式中使用。

深色主题画笔

若要在深色主题下更改该控件的颜色,请在 App.xaml 中替代这些画笔。


<SolidColorBrush x:Key="FlipViewButtonBackgroundThemeBrush" Color="#59D5D5D5" />
<SolidColorBrush x:Key="FlipViewButtonBorderThemeBrush" Color="#59D5D5D5" />
<SolidColorBrush x:Key="FlipViewButtonForegroundThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="FlipViewButtonPointerOverBackgroundThemeBrush" Color="#F0D7D7D7" />
<SolidColorBrush x:Key="FlipViewButtonPointerOverBorderThemeBrush" Color="#9EC1C1C1" />
<SolidColorBrush x:Key="FlipViewButtonPointerOverForegroundThemeBrush" Color="#FF000000" />
<SolidColorBrush x:Key="FlipViewButtonPressedBackgroundThemeBrush" Color="#BD292929" />
<SolidColorBrush x:Key="FlipViewButtonPressedBorderThemeBrush" Color="#BD292929" />
<SolidColorBrush x:Key="FlipViewButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />
浅色主题画笔

若要在浅色主题下更改该控件的颜色,请在 App.xaml 中替代这些画笔。


<SolidColorBrush x:Key="FlipViewButtonBackgroundThemeBrush" Color="#59D5D5D5" />
<SolidColorBrush x:Key="FlipViewButtonBorderThemeBrush" Color="#59D5D5D5" />
<SolidColorBrush x:Key="FlipViewButtonForegroundThemeBrush" Color="#99000000" />
<SolidColorBrush x:Key="FlipViewButtonPointerOverBackgroundThemeBrush" Color="#F0D7D7D7" />
<SolidColorBrush x:Key="FlipViewButtonPointerOverBorderThemeBrush" Color="#9EC1C1C1" />
<SolidColorBrush x:Key="FlipViewButtonPointerOverForegroundThemeBrush" Color="#FF000000" />
<SolidColorBrush x:Key="FlipViewButtonPressedBackgroundThemeBrush" Color="#BD292929" />
<SolidColorBrush x:Key="FlipViewButtonPressedBorderThemeBrush" Color="#BD292929" />
<SolidColorBrush x:Key="FlipViewButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />
其他资源

<Thickness x:Key="FlipViewButtonBorderThemeThickness">1</Thickness>
共享资源

该控件模板使用这些资源与其他控件模板共享。更改这些值将影响使用这些资源的其他控件。


<SolidColorBrush x:Key="FocusVisualBlackStrokeThemeBrush" Color="Black" />
<SolidColorBrush x:Key="FocusVisualWhiteStrokeThemeBrush" Color="White" />

默认样式


<!-- Default style for Windows.UI.Xaml.Controls.FlipView -->
<Style TargetType="FlipView">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="TabNavigation" Value="Once" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
    <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
    <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
    <Setter Property="ScrollViewer.IsHorizontalScrollChainingEnabled" Value="True" />
    <Setter Property="ScrollViewer.IsVerticalScrollChainingEnabled" Value="True" />
    <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
    <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel AreScrollSnapPointsRegular="True" Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="FlipView">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="PointerFocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border Background="{TemplateBinding Background}" 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}" 
                            Margin="3">
                        <Border.Resources>
                        <ControlTemplate x:Key="HorizontalNextTemplate" TargetType="Button">
                            <Border x:Name="Root"
                                    Background="{StaticResource FlipViewButtonBackgroundThemeBrush}"
                                    BorderThickness="{StaticResource FlipViewButtonBorderThemeThickness}"
                                    BorderBrush="{StaticResource FlipViewButtonBorderThemeBrush}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBackgroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBorderThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverForegroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBackgroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBorderThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedForegroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Path x:Name="Arrow"
                                      Data="M4.12,0 L9.67,5.47 L4.12,10.94 L0,10.88 L5.56,5.47 L0,0.06 z"
                                      Fill="{StaticResource FlipViewButtonForegroundThemeBrush}"
                                      Width="9.67"
                                      Height="10.94"
                                      Stretch="Fill"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      UseLayoutRounding="False" />
                            </Border>
                        </ControlTemplate>
                        <ControlTemplate x:Key="HorizontalPreviousTemplate" TargetType="Button">
                            <Border x:Name="Root"
                                    Background="{StaticResource FlipViewButtonBackgroundThemeBrush}"
                                    BorderThickness="{StaticResource FlipViewButtonBorderThemeThickness}"
                                    BorderBrush="{StaticResource FlipViewButtonBorderThemeBrush}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBackgroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBorderThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverForegroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBackgroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBorderThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedForegroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Path x:Name="Arrow"
                                      Data="M5.55,0 L9.67,0.06 L4.12,5.47 L9.67,10.88 L5.55,10.94 L0,5.48 z"
                                      Fill="{StaticResource FlipViewButtonForegroundThemeBrush}"
                                      Width="9.67"
                                      Height="10.94"
                                      Stretch="Fill"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      UseLayoutRounding="False" />
                            </Border>
                        </ControlTemplate>
                        <ControlTemplate x:Key="VerticalNextTemplate" TargetType="Button">
                            <Border x:Name="Root"
                                    Background="{StaticResource FlipViewButtonBackgroundThemeBrush}"
                                    BorderThickness="{StaticResource FlipViewButtonBorderThemeThickness}"
                                    BorderBrush="{StaticResource FlipViewButtonBorderThemeBrush}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBackgroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBorderThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverForegroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBackgroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBorderThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedForegroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Path x:Name="Arrow"
                                      Data="M0.06,0 L5.47,5.56 L10.88,0 L10.94,4.12 L5.48,9.67 L0,4.12 z"
                                      Fill="{StaticResource FlipViewButtonForegroundThemeBrush}"
                                      Width="10.94"
                                      Height="9.67"
                                      Stretch="Fill"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      UseLayoutRounding="False" />
                            </Border>
                        </ControlTemplate>
                        <ControlTemplate x:Key="VerticalPreviousTemplate" TargetType="Button">
                            <Border x:Name="Root"
                                    Background="{StaticResource FlipViewButtonBackgroundThemeBrush}"
                                    BorderThickness="{StaticResource FlipViewButtonBorderThemeThickness}"
                                    BorderBrush="{StaticResource FlipViewButtonBorderThemeBrush}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBackgroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverBorderThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPointerOverForegroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBackgroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
                                                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedBorderThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow"
                                                                               Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlipViewButtonPressedForegroundThemeBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Path x:Name="Arrow"
                                      Data="M5.63,0 L11.11,5.55 L11.05,9.67 L5.64,4.12 L0.23,9.67 L0.17,5.55 z"
                                      Fill="{StaticResource FlipViewButtonForegroundThemeBrush}"
                                      Width="10.94"
                                      Height="9.67"
                                      Stretch="Fill"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      UseLayoutRounding="False" />
                            </Border>
                        </ControlTemplate>
                    </Border.Resources>
                        <Grid>
                            <ScrollViewer x:Name="ScrollingHost"
                                          VerticalSnapPointsType="MandatorySingle"
                                          HorizontalSnapPointsType="MandatorySingle"
                                          HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                          HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                          VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                          VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                          IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                          IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                          IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                          IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                          IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                          BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                          Padding="{TemplateBinding Padding}"
                                          ZoomMode="Disabled"
                                          TabNavigation="{TemplateBinding TabNavigation}"
                                          IsTabStop="False" >
                                <ItemsPresenter />
                            </ScrollViewer>
                            <Button x:Name="PreviousButtonHorizontal"
                                    Template="{StaticResource HorizontalPreviousTemplate}"
                                    Width="70"
                                    Height="40"
                                    IsTabStop="False"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center" />
                            <Button x:Name="NextButtonHorizontal"
                                    Template="{StaticResource HorizontalNextTemplate}"
                                    Width="70"
                                    Height="40"
                                    IsTabStop="False"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Center" />
                            <Button x:Name="PreviousButtonVertical"
                                    Template="{StaticResource VerticalPreviousTemplate}"
                                    Width="70"
                                    Height="40"
                                    IsTabStop="False"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Top" />
                            <Button x:Name="NextButtonVertical"
                                    Template="{StaticResource VerticalNextTemplate}"
                                    Width="70"
                                    Height="40"
                                    IsTabStop="False"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Bottom" />
                        </Grid>
                    </Border>
                    <Rectangle x:Name="FocusVisualWhite" 
                               IsHitTestVisible="False" 
                               Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" 
                               StrokeEndLineCap="Square" 
                               StrokeDashArray="1,1" 
                               Opacity="0" 
                               StrokeDashOffset="1.5" />
                    <Rectangle x:Name="FocusVisualBlack" 
                               IsHitTestVisible="False" 
                               Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" 
                               StrokeEndLineCap="Square" 
                               StrokeDashArray="1,1" 
                               Opacity="0" 
                               StrokeDashOffset="0.5" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值