Xamarin:windows uwp 的分段控制
Xamarin : Segmented Control for windows uwp
如何在 windows UWP 中为分段控件制作自定义渲染器。我按照此 link 自定义呈现 IOS 和 android 中的分段控件。但是我找不到 windows UWP 的任何内容。任何人都可以在此提供任何资源,或者是否有任何替代方法可以类似于 windows UWP 中的分段控制。
我用自定义样式的 RadioButtons 做过一次。为您的按钮编辑 RadioButton 样式 - 创建您想要的已选中和未选中样式,并为它们分配相同的组,这样您一次只能 select 一个按钮。
不知道有没有更简单的方法。
编辑:示例代码,按照您想要的方式进行编辑:
<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>
我自己找到了解决方案。
最近找了个nuget包FreshEssentials. It has the implementation of segmented button group. Follow this github link找实现。简单易用。
现在有一个 Xamarin Forms 跨平台库可以做到这一点。
如何在 windows UWP 中为分段控件制作自定义渲染器。我按照此 link 自定义呈现 IOS 和 android 中的分段控件。但是我找不到 windows UWP 的任何内容。任何人都可以在此提供任何资源,或者是否有任何替代方法可以类似于 windows UWP 中的分段控制。
我用自定义样式的 RadioButtons 做过一次。为您的按钮编辑 RadioButton 样式 - 创建您想要的已选中和未选中样式,并为它们分配相同的组,这样您一次只能 select 一个按钮。 不知道有没有更简单的方法。
编辑:示例代码,按照您想要的方式进行编辑:
<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>
我自己找到了解决方案。
最近找了个nuget包FreshEssentials. It has the implementation of segmented button group. Follow this github link找实现。简单易用。
现在有一个 Xamarin Forms 跨平台库可以做到这一点。