none
FlipView Metro界面自定义问题

    问题

  • 您好,我想问一下,FlipView在windows8的鼠标模式下,怎么样能否重新定义前后项的那个按钮的自定义?

    如图的

    

    2012年5月11日 12:16

答案

  • 你好,

    你所看的那个例子的HTML 5版本就有自定义的部分:http://code.msdn.microsoft.com/windowsapps/FlipView-control-sample-18e434b4 

    不过你要XAML的自定义的话,你就需要用到Blend,先导出其默认的控件模板,然后进行修改:

    <Style x:Key="FlipViewStyle1" 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.IsHorizontalScrollChainingEnabled" Value="True"/>
      <Setter Property="ScrollViewer.IsVerticalScrollChainingEnabled" Value="True"/>
      <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
      <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 Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>
                      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Unfocused"/>
                  <VisualState x:Name="PointerFocused"/>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3">
                <Border.Resources>
                  <ControlTemplate x:Key="HorizontalNextTemplate" TargetType="Button">
                    <Border x:Name="Root" BorderBrush="{StaticResource ScrollBarTrackBrush}" BorderThickness="1" Background="{StaticResource ScrollBarTrackBrush}">
                      <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                          <VisualState x:Name="Normal"/>
                          <VisualState x:Name="PointerOver">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverFillBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverBorderBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </VisualState>
                          <VisualState x:Name="Pressed">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPressedFillBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPressedBorderBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarGlyphArrowPressedBrush}"/>
                              </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 ScrollBarGlyphArrowBrush}" HorizontalAlignment="Center" Height="10.94" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.67"/>
                    </Border>
                  </ControlTemplate>
                  <ControlTemplate x:Key="HorizontalPreviousTemplate" TargetType="Button">
                    <Border x:Name="Root" BorderBrush="{StaticResource ScrollBarTrackBrush}" BorderThickness="1" Background="{StaticResource ScrollBarTrackBrush}">
                      <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                          <VisualState x:Name="Normal"/>
                          <VisualState x:Name="PointerOver">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverFillBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverBorderBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </VisualState>
                          <VisualState x:Name="Pressed">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPressedFillBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPressedBorderBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarGlyphArrowPressedBrush}"/>
                              </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 ScrollBarGlyphArrowBrush}" HorizontalAlignment="Center" Height="10.94" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="9.67"/>
                    </Border>
                  </ControlTemplate>
                  <ControlTemplate x:Key="VerticalNextTemplate" TargetType="Button">
                    <Border x:Name="Root" BorderBrush="{StaticResource ScrollBarTrackBrush}" BorderThickness="1" Background="{StaticResource ScrollBarTrackBrush}">
                      <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                          <VisualState x:Name="Normal"/>
                          <VisualState x:Name="PointerOver">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverFillBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverBorderBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </VisualState>
                          <VisualState x:Name="Pressed">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPressedFillBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPressedBorderBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarGlyphArrowPressedBrush}"/>
                              </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 ScrollBarGlyphArrowBrush}" HorizontalAlignment="Center" Height="9.67" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="10.94"/>
                    </Border>
                  </ControlTemplate>
                  <ControlTemplate x:Key="VerticalPreviousTemplate" TargetType="Button">
                    <Border x:Name="Root" BorderBrush="{StaticResource ScrollBarTrackBrush}" BorderThickness="1" Background="{StaticResource ScrollBarTrackBrush}">
                      <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                          <VisualState x:Name="Normal"/>
                          <VisualState x:Name="PointerOver">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverFillBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPointerOverBorderBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </VisualState>
                          <VisualState x:Name="Pressed">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPressedFillBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarButtonPressedBorderBrush}"/>
                              </ObjectAnimationUsingKeyFrames>
                              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Arrow">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ScrollBarGlyphArrowPressedBrush}"/>
                              </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 ScrollBarGlyphArrowBrush}" HorizontalAlignment="Center" Height="9.67" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Center" Width="10.94"/>
                    </Border>
                  </ControlTemplate>
                </Border.Resources>
                <Grid>
                  <ScrollViewer x:Name="ScrollingHost" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" VerticalSnapPointsType="MandatorySingle" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                    <ItemsPresenter/>
                  </ScrollViewer>
                  <Button x:Name="PreviousButtonHorizontal" HorizontalAlignment="Left" Height="40" IsTabStop="False" Template="{StaticResource HorizontalPreviousTemplate}" VerticalAlignment="Center" Width="70"/>
                  <Button x:Name="NextButtonHorizontal" HorizontalAlignment="Right" Height="40" IsTabStop="False" Template="{StaticResource HorizontalNextTemplate}" VerticalAlignment="Center" Width="70"/>
                  <Button x:Name="PreviousButtonVertical" HorizontalAlignment="Center" Height="40" IsTabStop="False" Template="{StaticResource VerticalPreviousTemplate}" VerticalAlignment="Top" Width="70"/>
                  <Button x:Name="NextButtonVertical" HorizontalAlignment="Center" Height="40" IsTabStop="False" Template="{StaticResource VerticalNextTemplate}" VerticalAlignment="Bottom" Width="70"/>
                </Grid>
              </Border>
              <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeBrush}" StrokeDashArray="1,1"/>
              <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeBrush}" StrokeDashArray="1,1"/>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    你可以看见其中里面有四个按钮的模板,其中都有Path,你就可以用自己的设计去替换掉他们就可以了.


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年5月14日 10:19