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

Answer 1

Hi,

As far as I know, we cannot change this in XAML. Maybe you can consider use other control instead of it. Like the scenario 4 in this sample
http://code.msdn.microsoft.com/windowsapps/XAML-FlipView-control-0ae45312

Best regards,
Jesse

---

Jesse Jiang
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

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