Xamarin : Segmented Control for windows uwp

倾然丶 夕夏残阳落幕 提交于 2019-12-06 03:11:24
Himanshu Dwivedi

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.

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

Plugin Segmented Control for .NET Standard

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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!