2016-08-22 14 views
1

Windows UWPでセグメント化制御用のカスタムレンダラーを作成する方法を教えてください。私はこのlinkに続いて、IOSとアンドロイドでセグメント化されたコントロールをカスタムレンダリングしました。しかし、私はWindows UWPのために何も見つけることができませんでした。誰もがこれに任意のリソースを提供することができますかこれは、Windows UWPのセグメント化されたコントロールに似て何か別の方法です。Xamarin:Windows用のセグメント化制御uwp

enter image description here

答えて

2

私は解決策を自分で見つけ:SAMPEコードは、それをあなたが望むように編集します。

最近、ナゲットパッケージFreshEssentialsが見つかりました。これは、セグメント化されたボタングループの実装を持っています。実装を見つけるには、github linkに従ってください。それは使いやすいです。

+0

おはようございます! –

+0

これもあります:(https://github.com/1iveowl/Plugin.SegmentedControl –

1

私は、カスタムスタイルのラジオボタンで一度それをやりました。ボタンのRadioButtonスタイルを編集する - チェックしたスタイルとチェックされていないスタイルを作成し、同じグループにして、一度に1つのボタンだけを選択することができます。 簡単な方法があるかどうかわかりません。

編集:

<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> 
+0

あなたはUWPのカスタマイズのためのいくつかのコードを提供していただけます。はい、ラジオボタンで行うことはできますが、この場合はuwpでレイアウトテンプレートが使用されているかどうかはわかりません。 –

+0

サンプルコード – RTDev

+0

の編集が追加されました。スタイルが始まる行の下に、行 - rgが表示されます。 はパディング0を設定し、この値をPadding = "{TemplateBinding Padding}"を使用してスタイルを定義したコントロールで使用できます。ここで読むことができるThemeResourceについて:https ://msdn.microsoft.com/en-us/windows/uwp/xaml-platform/themeresource-markup-extensionしかし、あなたは、ThemeResourceが必要とする情報はデフォルトのシステムスタイルを使用する必要があるので、変更することができます)すべてのValue = "{ThemeResource ...}" Value = "Red"または他の任意の値を指定します – RTDev

関連する問題