сделать границы шоу для выбранной кнопки многократного ряда кнопок

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>