使邊框對顯示按鈕

Question

我用於顯示的按鈕，鼠標懸停底邊框下面風格的多行的選擇按鈕，然後單擊..其工作正常，但點擊後邊界沒有顯示

<Style x:Key="ButtonStyleOrders1" TargetType="Button"> 
     <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/> 
     <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/> 
     <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/> 
     <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/> 
     <Setter Property="Padding" Value="8,4,8,4"/> 
     <Setter Property="HorizontalAlignment" Value="Left"/> 
     <Setter Property="VerticalAlignment" Value="Center"/> 
     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
     <Setter Property="FontWeight" Value="Normal"/> 
     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
     <Setter Property="UseSystemFocusVisuals" Value="True"/> 
     <Setter Property="FocusVisualMargin" Value="-3"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"> 
            <VisualState.Setters> 
             <Setter Target="ContentPresenter.(ContentPresenter.Background)"> 
              <Setter.Value> 
               <SolidColorBrush Color="White"/> 
              </Setter.Value> 
             </Setter> 
             <Setter Target="ContentPresenter.(ContentPresenter.BorderBrush)"> 
              <Setter.Value> 
               <SolidColorBrush Color="#FF2C8CA1"/> 
              </Setter.Value> 
             </Setter> 
             <Setter Target="ContentPresenter.(ContentPresenter.BorderThickness)"> 
              <Setter.Value> 
               <Thickness>0</Thickness> 
              </Setter.Value> 
             </Setter> 
            </VisualState.Setters> 
            <Storyboard> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="PointerOver"> 
            <VisualState.Setters> 
             <Setter Target="ContentPresenter.(ContentPresenter.Background)"> 
              <Setter.Value> 
               <SolidColorBrush Color="White"/> 
              </Setter.Value> 
             </Setter> 
            </VisualState.Setters> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <SolidColorBrush Color="#FF2C8CA1"/> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <VisualState.Setters> 
             <Setter Target="ContentPresenter.(ContentPresenter.Background)"> 
              <Setter.Value> 
               <SolidColorBrush Color="White"/> 
              </Setter.Value> 
             </Setter> 
            </VisualState.Setters> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <SolidColorBrush Color="#FF2C8CA1"/> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <VisualState.Setters> 
             <Setter Target="ContentPresenter.(ContentPresenter.Background)"> 
              <Setter.Value> 
               <SolidColorBrush Color="White"/> 
              </Setter.Value> 
             </Setter> 
             <Setter Target="ContentPresenter.(ContentPresenter.BorderThickness)"> 
              <Setter.Value> 
               <Thickness>0</Thickness> 
              </Setter.Value> 
             </Setter> 
            </VisualState.Setters> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <SolidColorBrush Color="Black"/> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="VisualStateGroup"/> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Background="White"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

我想和底邊框按鈕按下後，直到選擇下一個按鈕，請提供解決方案

Answer 1

根據你的描述，使用RadioButton應滿足您的要求。

，你可以自定義它的風格，使它看起來像一個按鈕，然後你可以添加在其視覺狀態等作用。

我做了一個簡單的款式爲你參考：

<Page ...> 
    <Page.Resources> 
     <Style x:Key="RadioButtonStyle1" TargetType="RadioButton"> 
      <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}" /> 
      <Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}" /> 
      <Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}" /> 
      <Setter Property="Padding" Value="8,6,0,0" /> 
      <Setter Property="HorizontalAlignment" Value="Left" /> 
      <Setter Property="VerticalAlignment" Value="Center" /> 
      <Setter Property="HorizontalContentAlignment" Value="Left" /> 
      <Setter Property="VerticalContentAlignment" Value="Top" /> 
      <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
      <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> 
      <Setter Property="MinWidth" Value="120" /> 
      <Setter Property="UseSystemFocusVisuals" Value="True" /> 
      <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="RadioButton"> 
         <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" BorderThickness="3"> 
          <ContentPresenter x:Name="ContentPresenter" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Foreground="{TemplateBinding Foreground}" /> 

          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForeground}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackground}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="PointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForeground}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Red" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderThickness"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="2" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackground}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed" /> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonForegroundDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBackgroundDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBorderBrushDisabled}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="CheckStates"> 
            <VisualState x:Name="Checked"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Red" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderThickness"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="2" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Unchecked"> 
             <Storyboard> 
              <Storyboard> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForeground}" /> 
               </ObjectAnimationUsingKeyFrames> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackground}" /> 
               </ObjectAnimationUsingKeyFrames> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrush}" /> 
               </ObjectAnimationUsingKeyFrames> 
              </Storyboard> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Indeterminate" /> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Page.Resources> 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <StackPanel> 
      <RadioButton Content="option1" GroupName="r" Style="{StaticResource RadioButtonStyle1}" /> 
      <RadioButton Content="option2" GroupName="r" Style="{StaticResource RadioButtonStyle1}" /> 
      <RadioButton Content="option3" GroupName="r" Style="{StaticResource RadioButtonStyle1}" /> 
     </StackPanel> 
    </Grid> 
</Page>