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;
}

如何一次创建一个带有单个活动按钮的按钮

1 个答案: