Question

我是WPF的新手，我正在尝试制作一排按钮，当你将鼠标悬停在它们上面时，它们会获得红色背景颜色，点击后点击背景的按钮会变为红色。 / p>

我有这个工作，现在唯一的问题是按钮点击后按钮不再具有IsMouseOver功能。

的App.xaml

<Style x:Key="MenuButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="#373442" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontSize" Value="15" />
        <Setter Property="SnapsToDevicePixels" Value="True" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border CornerRadius="0" Background="{TemplateBinding Background}">
                        <Grid>
                            <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15px"/>
                        </Grid>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#F06060" />
                            <Setter Property="Foreground" Value="White" />
                        </Trigger>

                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" Value="#F06060" />
                            <Setter Property="Foreground" Value="White" />
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

按钮XAML

<Button Style="{StaticResource ResourceKey=MenuButton}" Content="Logout" HorizontalAlignment="Left" VerticalAlignment="Top" Width="201" Height="58" Margin="0,315,0,0"/>

C＃代码

public static Button[] buttonArray = new Button[3];

        public TaskManager()
        {
            InitializeComponent();

            buttonArray[0] = HomeButton;
            buttonArray[1] = TasksButton;
            buttonArray[2] = AdminButton;
        }

        public static void paneSwitcher(Button button)
        {

            foreach (Button aButton in buttonArray)
            {
                aButton.Background = Brushes.Red;
            }

            button.Background = new SolidColorBrush(Color.FromArgb(255, 240, 96, 96));
        }

        private void HomeButton_Click(object sender, RoutedEventArgs e)
        {
            paneSwitcher(HomeButton);
        }

        private void TasksButton_Click(object sender, RoutedEventArgs e)
        {
            paneSwitcher(TasksButton);
        }

        private void AdminButton_Click(object sender, RoutedEventArgs e)
        {
            paneSwitcher(AdminButton);
        }

Answer 1

您可以将Button替换为具有其他ToggleButton状态的IsChecked。

然后，您可以在ControlTemplate添加另一个触发器，以便在点击时更改Button的颜色：

<Style x:Key="MenuButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Background" Value="#373442" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontSize" Value="15" />
    <Setter Property="SnapsToDevicePixels" Value="True" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Border CornerRadius="0" Background="{TemplateBinding Background}">
                    <Grid>
                        <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" 
                                                  HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15px"/>
                    </Grid>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Background" Value="Blue" />
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>

                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#F06060" />
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>

                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="#F06060" />
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

按钮XAML

<ToggleButton Style="{StaticResource ResourceKey=MenuButton}" Content="Logout" HorizontalAlignment="Left" VerticalAlignment="Top" Width="201" Height="58" />

Answer 2

我建议采用略有不同的方法。

如果不是精心管理Buttons集合，请使用RadioButtons组作为ToggleButtons设置？

风格：

 <Style TargetType="RadioButton" 
               BasedOn="{StaticResource {x:Type ToggleButton}}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate  TargetType="{x:Type RadioButton}">
                    <Border CornerRadius="0" Margin="1"
                            Background="{TemplateBinding Background}">
                        <ContentPresenter x:Name="MyContentPresenter" 
                                         Content="{TemplateBinding Content}" 
                                         HorizontalAlignment="Left" 
                                         VerticalAlignment="Center" Margin="5"/>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="RadioButton.IsChecked" Value="True">
                            <Setter Property="Background" Value="Red" />
                            <Setter Property="Foreground" Value="White" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#F06060" />
                            <Setter Property="Foreground" Value="White" />
                        </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后使用它：

<UniformGrid Height="100" Width="100" VerticalAlignment="Top" Rows="3">
            <RadioButton  Content="AAA" GroupName="MY_GROUP"
                          Command="{Binding RbChecked, Mode=OneTime}"
                          CommandParameter="A"/>
            <RadioButton  Content="BBB" GroupName="MY_GROUP"
                          Command="{Binding RbChecked, Mode=OneTime}"
                          CommandParameter="B"/>
            <RadioButton  Content="CCC" GroupName="MY_GROUP"
                          Command="{Binding RbChecked, Mode=OneTime}"
                          CommandParameter="C"/>
        </UniformGrid>

您DataContext的班级中的Command implementation示例：

    private ICommand _RbChecked;

    public ICommand RbChecked
    {
        get { return _RbChecked ?? (_RbChecked = new RelayCommand<object>(a => RbCheckedCommand(a))); }
    }

    private void RbCheckedCommand(object item)
    {
        this.CurrentChosen = (string)item;
    }

点击后WPF IsMouseOver和后台更改

2 个答案: