Xamarin : Segmented Control for windows uwp

问题

How can I make a custom renderer for Segmented Control in windows UWP. I followed this link to custom render the segmented control in IOS and android. But I couldn't find anything for windows UWP. Can anyone provide any resource in this or is there any alternate way of doing this similar to segmented control in windows UWP.

回答1:

I found the Solution myself.

I recently found a nuget package FreshEssentials. It has the implementation of segmented button group. Follow this github link to find the implementation. It is easy to use.

回答2:

There is a Xamarin Forms cross platform library now that does this.

Plugin Segmented Control for .NET Standard

回答3:

I did it once with custom-styled RadioButtons. Edit the RadioButton style for your buttons - create checked and unchecked styles that are looking as you want and give them the same group so you can select only one button at the time. Don't know if there is any easier way.

edit: sampe code, edit it the way you want:

<Page.Resources>
    <Style x:Key="RadioButtonStyle1" TargetType="RadioButton">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource RadioButtonContentForegroundThemeBrush}"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">

                                </VisualState>
                                <VisualState x:Name="Pressed">

                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonDisabledBackgroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonContentDisabledForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundRectangle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked">

                                </VisualState>
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                            <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>


                        <Grid HorizontalAlignment="Stretch">
                            <Grid x:Name="BackgroundRectangle" Background="Transparent">
                                <Border BorderThickness="1" BorderBrush="White" Margin="0" HorizontalAlignment="Stretch">
                                    <Rectangle Margin="0" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" HorizontalAlignment="Stretch" UseLayoutRounding="False"/>
                                </Border>
                                <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="Title"></TextBlock>

                            </Grid>
                            <ContentPresenter x:Name="ContentPresenter" Foreground="White" AutomationProperties.AccessibilityView="Raw" 
                                          ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" 
                                          Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>


<Grid Height="40" Background="Black" BorderThickness="0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="10"/>
    </Grid.ColumnDefinitions>

    <RadioButton Height="30" Content="Button1" Grid.Column="1" Style="{StaticResource RadioButtonStyle1}" GroupName="MainGroup" Checked="Button1_OnChecked"></RadioButton>
    <RadioButton Height="30" Content="Button2" Grid.Column="2" Style="{StaticResource RadioButtonStyle1}" GroupName="MainGroup" Checked="Button2_OnChecked"></RadioButton>
    <RadioButton Height="30" Content="Button3" Grid.Column="3" Style="{StaticResource RadioButtonStyle1}" GroupName="MainGroup" Checked="Button3_OnChecked"></RadioButton>
    <RadioButton Height="30" Content="Button4" Grid.Column="4" Style="{StaticResource RadioButtonStyle1}" GroupName="MainGroup" Checked="Button4_OnChecked"></RadioButton>
</Grid>

来源：https://stackoverflow.com/questions/39077382/xamarin-segmented-control-for-windows-uwp