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