WPF IsMouseOver и изменение фона при клике - PullRequest
Новая
       38

WPF IsMouseOver и изменение фона при клике

0 голосов
/ 09 мая 2018

Я довольно новичок в WPF и пытаюсь создать ряд кнопок, где при наведении на них курсора они получают красный цвет фона, а при нажатии кнопки, на которой вы щелкнули, фон становится красным.

У меня это работает, единственная проблема сейчас заключается в том, что кнопки больше не имеют функции 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);
        }

Ответы [ 2 ]

0 голосов
/ 09 мая 2018

Вы можете заменить 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" />
0 голосов
/ 09 мая 2018

Я предлагаю немного другой подход.

Как насчет того, чтобы вместо кропотливого управления набором Buttons использовать группу RadioButtons в стиле ToggleButtons?

Style: 

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

    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;
    }
...