How to change position of slide buttons?

[Bill]

I'd like to be able to move the slide buttons from the middle of the control to the bottom. How is this achieved?

[Nikolay Demirev]

Hello Bill,

You can customize the buttons and indicators by modifying the control template. Here is the original template of the SlideView:

<ControlTemplate x:Key="RadSlideView_ControlTemplate">
        <Grid>
            <ContentPresenter />

                <Grid HorizontalOptions="Start" VerticalOptions="Center" IsVisible="{TemplateBinding ShowButtons}">
                    <Label Text="‹" FontSize="{TemplateBinding SlideButtonsSize}" FontFamily="Arial" HorizontalOptions="Start" TextColor="{TemplateBinding SlideButtonsColor}" />
                    <Button Command="{TemplateBinding Path=PreviousItemCommand}" BackgroundColor="Transparent"  InputTransparent="False">
                        <Button.Opacity>
                            <OnPlatform x:TypeArguments="x:Double"
                                    iOS="1"
                                    Android="0"
                                    WinPhone="0"/>
                        </Button.Opacity>
                    </Button>
                </Grid>

                <Grid VerticalOptions="Center" HorizontalOptions="End" IsVisible="{TemplateBinding ShowButtons}">
                    <Label Text="›" FontSize="{TemplateBinding SlideButtonsSize}" FontFamily="Arial" HorizontalOptions="End" TextColor="{TemplateBinding SlideButtonsColor}"/>
                    <Button Command="{TemplateBinding Path=NextItemCommand}" BackgroundColor="Transparent"  InputTransparent="False">
                        <Button.Opacity>
                            <OnPlatform x:TypeArguments="x:Double"
                                    iOS="1"
                                    Android="0"
                                    WinPhone="0"/>
                        </Button.Opacity>
                    </Button>
                </Grid>

                <slideView:SlideViewIndicators Owner="{TemplateBinding}" Spacing="{TemplateBinding Path=IndicatorsSpacing}"
                    SelectedIndicatorTemplate="{TemplateBinding SelectedIndicatorTemplate}" IndicatorTemplate="{TemplateBinding IndicatorTemplate}"
                    IsVisible="{TemplateBinding ShowIndicators}" VerticalOptions="End" HorizontalOptions="Center" InputTransparent="True"/>
        </Grid>
    </ControlTemplate>

Just modify it and set it to the ControlTemplate property of the SlideView.

I hope this helps.

Regards,
Nikolay Demirev
Progress TelerikSlideView for Xamarin

[Bill]

Thanks, I managed to get that working. One small thing though, I had to remove this:

<Button.Opacity>
  <OnPlatform x:TypeArguments="x:Double" iOS="1" Android="0" WinPhone="0"/>
</Button.Opacity>

 

As it was causing the following error:

"Unable to cast object of type 'Xamarin.Forms.Xaml.ListNode' to type 'Xamarin.Forms.Xaml.IElementNode'."

 

 

 

 

[Nikolay Demirev]

Hello Bill,

I am glad you have managed to get it working.

is currently obsolete, and if you use a newer version of Xamarin.Forms it might be an issue. You could update it to use the new syntax:

<OnPlatform x:TypeArguments="x:Double">
    <On Platform="iOS">1</On>
    <On Platform="Android, UWP">0</On>
</OnPlatform>

I am not sure that that will solve the issue because I can not reproduce it, but it might be a solution.

Regards,
Nikolay Demirev
Progress TelerikSlideView for Xamarin