Question

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.

我尝试在ToggleButton模板中创建控件模板。 UI看起来与此类似，但我使用文本块作为堆栈面板中的控件。现在，如果我用按钮替换文本块，则行为会发生变化。

 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>

有关如何实现这一目标的任何变更或建议都会有所帮助

Answer 1

其他行为是由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 FALSE上设置e.Handeld

别忘了参考Interactivity-Assembly。

使用像这样的行为

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

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

1 个答案: