如何一次創建一排帶有單個活動按鈕的按鈕

Question

我的第一個問題！

我正在尋找在XAML中創建單行的文本填充按鈕（有點像這樣，但沒有圖標：http://bootsnipp.com/img/screenshots/0f277634083d2f5fd6c1bb54688da5b9b39bbc26.png），其中一個可以一次選擇，類似於單選按鈕。 RadioButton控件具有正確的功能，但錯誤的審美性，以及我所做的任何樣式或模板都無法正常工作。

是否有任何其他控件可以爲我提供一種方法來創建保持RadioButton功能的這一行按鈕？或者有沒有辦法模擬出RadioButton，使它看起來像一個文本填充按鈕？

謝謝！

Answer 1

設計自定義模板非常困難:-)，特別是如果您想要正確處理所有可能的狀態轉換（無法在不同組之間更改對象的相同屬性）。這裏有一個我一起爲你而投擲;如果你想改變簡單的東西，有幾個TODO（如果你更冒險，你也可以改變其他東西）。

首先，XAML：將其粘貼到您的頁面中，替換除PhoneApplicationPage本身的開始和結束標記之外的所有內容。您還可以將Resources您App.xaml文件，如果你想在其他地方使用的樣式：

<phone:PhoneApplicationPage.Resources> 
    <Style x:Key="TabControl" TargetType="RadioButton"> 
     <Setter Property="Background" Value="Transparent"/> 
     <!--TODO: Change this BorderBrush if you want a different colour--> 
     <Setter Property="BorderBrush" Value="#4060ff"/> 
     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/> 
     <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/> 
     <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/> 
     <Setter Property="HorizontalContentAlignment" Value="Center"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Padding" Value="{StaticResource PhoneTouchTargetOverhang}"/> 
     <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="RadioButton"> 
      <Grid Background="Transparent"> 
       <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
        <VisualState x:Name="Normal"/> 
        <VisualState x:Name="MouseOver"/> 
        <VisualState x:Name="Pressed"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PressedBorder"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentBorder"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Disabled"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledBorder"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckedBorder"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckedBorder"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentBorder"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
       <VisualStateGroup x:Name="CheckStates"> 
        <VisualState x:Name="Checked"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckedBorder"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DisabledBorder"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Unchecked"/> 
        <VisualState x:Name="Indeterminate"/> 
       </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 

       <!--TODO: Change this Margin if you don't like the big gaps between things--> 
       <Grid Margin="{StaticResource PhoneTouchTargetOverhang}"> 
       <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" /> 
       <Border x:Name="PressedBorder" BorderBrush="{x:Null}" BorderThickness="0" Background="{TemplateBinding BorderBrush}" Opacity="0.75" Visibility="Collapsed" /> 
       <Border x:Name="CheckedBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding BorderBrush}" Visibility="Collapsed"/> 
       <Border x:Name="DisabledBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Visibility="Collapsed" /> 
       <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Grid> 
      </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
     </Setter> 
    </Style> 
    </phone:PhoneApplicationPage.Resources> 

    <Grid x:Name="LayoutRoot" Background="Transparent"> 
    <StackPanel VerticalAlignment="Center"> 
     <Grid x:Name="container"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 
     <RadioButton Content="home" Grid.Column="0" Style="{StaticResource TabControl}" IsChecked="True"/> 
     <RadioButton Content="stuff" Grid.Column="1" Style="{StaticResource TabControl}" /> 
     <RadioButton Content="info" Grid.Column="2" Style="{StaticResource TabControl}" /> 
     <RadioButton Content="more..." Grid.Column="3" Style="{StaticResource TabControl}" /> 
     </Grid> 
     <CheckBox x:Name="toggle" Content="show disabled" Checked="toggle_Checked" Unchecked="toggle_Unchecked"/> 
    </StackPanel> 
    </Grid> 

現在的代碼一點點展現啓用/禁用狀態：

private void toggle_Checked(object sender, RoutedEventArgs e) 
{ 
    foreach (var control in container.Children) 
    (control as RadioButton).IsEnabled = false; 
} 

private void toggle_Unchecked(object sender, RoutedEventArgs e) 
{ 
    foreach (var control in container.Children) 
    (control as RadioButton).IsEnabled = true; 
}