locked
FlipView navigate buttons Visibility set to Visible

    Question

  • Hi everyone

    how to set the visibility of flipview navigate buttons to visible
    i tried doing it in the flipview style template but as soon as flipview loads the buttons go to Collapsed state.

     <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" Visibility="Visible"/>
                                    <Button x:Name="NextButtonHorizontal"
                                        Template="{StaticResource HorizontalNextTemplate}"
                                        Width="70"
                                        Height="40"
                                        IsTabStop="False"
                                        HorizontalAlignment="Right"
                                        VerticalAlignment="Center" Visibility="Visible"/>
                                    <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>
    Can anyone out there suggest me how to make flipview navigate buttons always visible 

    thans
    -noor


    Wednesday, May 22, 2013 4:48 PM

Answers

  • You might find some inspiration in the C# thread that shows how to set / reset FlipView button visibility from code behind: Hiding the next and previous buttons of a FlipView programatically

    If that solution matches your scenario, you'll have to translate to C++ code. The most elegant solution consists in creating a 'MyFlipView' subclass of FlipView and to act on the 'Loaded event' as indicated in the referenced thread. Use then in XAML as <local:MyFlipView ... /> 

     
    • Marked as answer by Jesse Jiang Tuesday, May 28, 2013 1:37 AM
    Friday, May 24, 2013 12:04 PM

All replies