创建一个切换按钮，将图像类似的附加

问题描述：

I want to have two buttons which behave similar to Radio Button Functionality plus can also handle the button click or Command functionality if using MVVM.

我试图创建切换按钮模板中的控件模板。用户界面看起来与此类似，但我已经使用文本块作为堆栈面板中的控件。现在，如果我用Button替换文本块，行为将发生变化。

Below is my XAML : 

    <ToggleButton Grid.Column="2"> 
              <ToggleButton.Template> 
               <ControlTemplate> 
                <Border Name="ControlBorder" CornerRadius="5" BorderThickness="0.5" BorderBrush="Black" HorizontalAlignment="Center"> 
                 <StackPanel Orientation="Horizontal"> 
                  <StackPanel Orientation="Horizontal" Name="CodeTextBlockStackPanel" HorizontalAlignment="Center"> 
                   <TextBlock Name="CodeTextBlock" Text="Code" Width="50" Margin="5,0,0,0" VerticalAlignment="Center"> 
                   </TextBlock> 
                  </StackPanel> 
                  <StackPanel Orientation="Horizontal" Name="ScanTextBlockStackPanel" HorizontalAlignment="Center"> 
                   <TextBlock Name="ScanTextBlock" Text="Scan" Width="50" Margin="5,0,0,0" VerticalAlignment="Center" ></TextBlock> 
                  </StackPanel> 
                 </StackPanel> 
                </Border> 
                <ControlTemplate.Triggers> 
                 <Trigger Property="ToggleButton.IsChecked" Value="True"> 
                  <Setter TargetName="CodeTextBlockStackPanel" Property="Opacity" Value="0.25"/> 
                  <Setter TargetName="ScanTextBlockStackPanel" Property="Background" Value="Green"/> 
                 </Trigger> 
                 <Trigger Property="ToggleButton.IsChecked" Value="False"> 
                  <Setter TargetName="ScanTextBlockStackPanel" Property="Opacity" Value="0.25"/> 
                  <Setter TargetName="CodeTextBlockStackPanel" Property="Background" Value="Green"/> 
                 </Trigger> 
                </ControlTemplate.Triggers> 
               </ControlTemplate> 
              </ToggleButton.Template> 
             </ToggleButton>

任何变化或建议如何这可以实现将是有益的

用什么样的行为变化？为什么你会在按钮里面使用按钮？请分享更多信息。显然'Button'会处理你的'Click-Event'，它不会通过它。所以有一个不同的行为。 – Peter

使用按钮不会触发我在放置按钮的堆栈面板上使用的触发器。如果我使用文本块，它工作正常。 –

我不知道你在做什么，但是你是否想在这个模板中放置一个？因为如果你是，它将无法工作 - 两者将会发生冲突。 – Logan

答

其他行为由Button把你Click造成的 - Event。如果你不需要它内部的Button，只想点击事件，然后使用这样的Behaviour。

public class ClickBehaviour : Behavior<FrameworkElement> 
    { 



     public ICommand MouseClickCommand 
     { 
      get { return (ICommand)GetValue(MouseClickCommandProperty); } 
      set { SetValue(MouseClickCommandProperty, value); } 
     } 

     // Using a DependencyProperty as the backing store for MouseClickCommand. This enables animation, styling, binding, etc... 
     public static readonly DependencyProperty MouseClickCommandProperty = 
      DependencyProperty.Register("MouseClickCommand", typeof(ICommand), typeof(ClickBehaviour), new PropertyMetadata(null)); 






     protected override void OnAttached() 
     { 
      this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown; 

      base.OnAttached(); 
     } 

     protected override void OnDetaching() 
     { 
      this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown; 
      base.OnDetaching(); 
     } 

     private void AssociatedObject_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) 
     { 
      MouseClickCommand?.Execute(null); 

     } 
    }

如果你仍然在AssociatedObject_MouseLeftButtonDown设置e.Handeld问题上FALSE

不要忘记引用交互组装。

使用行为这样

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:local="clr-namespace:WpfApplication1" 
     xmlns:interactivity="http://schemas.microsoft.com/expression/2010/interactivity" 
     mc:Ignorable="d" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
     <ToggleButton Grid.Column="2"> 
      <ToggleButton.Template> 
       <ControlTemplate> 
        <Border Name="ControlBorder" CornerRadius="5" BorderThickness="0.5" BorderBrush="Black" HorizontalAlignment="Center"> 
         <StackPanel Orientation="Horizontal"> 
          <StackPanel Orientation="Horizontal" Name="CodeTextBlockStackPanel" HorizontalAlignment="Center"> 
           <TextBlock Name="CodeTextBlock" Text="Code" Width="50" Margin="5,0,0,0" VerticalAlignment="Center"> 

           </TextBlock> 
           <interactivity:Interaction.Behaviors> 
            <local:ClickBehaviour MouseClickCommand="{Binding Path=MyC}" /> 
           </interactivity:Interaction.Behaviors> 
          </StackPanel> 
          <StackPanel Orientation="Horizontal" Name="ScanTextBlockStackPanel" HorizontalAlignment="Center"> 
           <TextBlock Name="ScanTextBlock" Text="Scan" Width="50" Margin="5,0,0,0" VerticalAlignment="Center" ></TextBlock> 
           <interactivity:Interaction.Behaviors> 
            <local:ClickBehaviour MouseClickCommand="{Binding Path=MyC}" /> 
           </interactivity:Interaction.Behaviors> 
          </StackPanel> 
         </StackPanel> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="ToggleButton.IsChecked" Value="True"> 
          <Setter TargetName="CodeTextBlockStackPanel" Property="Opacity" Value="0.25"/> 
          <Setter TargetName="ScanTextBlockStackPanel" Property="Background" Value="Green"/> 
         </Trigger> 
         <Trigger Property="ToggleButton.IsChecked" Value="False"> 
          <Setter TargetName="ScanTextBlockStackPanel" Property="Opacity" Value="0.25"/> 
          <Setter TargetName="CodeTextBlockStackPanel" Property="Background" Value="Green"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </ToggleButton.Template> 
     </ToggleButton> 
    </Grid> 
</Window>

创建一个切换按钮，将图像类似的附加

相关推荐