Регулировка видимости кнопки с помощью MouseOver - PullRequest
Новая
       24

Регулировка видимости кнопки с помощью MouseOver

7 голосов
/ 07 марта 2012

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

<StackPanel Name="ButtonOptions" Orientation="Horizontal" DockPanel.Dock="Bottom" Background="DarkBlue" Height="50" Width="auto">
    <!--<StackPanel.Resources>
        <Style TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Visibility" Value="Visible"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>-->
    <Button Name="LoginButton" FontSize="12" Click="LoginButton_Click" Content="Log In" Width="100" Height="31" Margin="50,0,0,0" 
            FontFamily="Arial" Visibility="Visible" IsEnabled="True" MouseEnter="LoginButton_MouseEnter" />
    <Button Name="OptionsButton" Content="Options" Width="100" Height="31" Margin="20,0,0,0" FontFamily="Arial"
            FontSize="12" Click="OptionsButton_Click" Visibility="Hidden" IsEnabled="False"/>
</StackPanel>

Раздел ресурсов закомментирован, потому что я попробовал это, и он не работал.Моя кнопка входа имеет следующий обработчик событий .. 

LoginButton.MouseEnter += new MouseEventHandler(LoginButton_MouseEnter);

Метод, который обрабатывает это .. 

private void LoginButton_MouseEnter(object sender, MouseEventArgs e)
{
    MessageBox.Show("Made in the login button listener for mouseOver");

    LoginButton.Visibility = Visibility.Visible;
}

Когда я запускаю свое приложение, ничего не происходит, когда я кладу поверхместо, где должна быть кнопка.Однако, если я первоначально установил видимость кнопки входа в систему на Видимый, я смогу увидеть кнопку, и когда я нажимаю на нее, мой логический метод входа в систему для входа пользователей переопределяется, и я получаю сообщение с сообщением в полеметод MouseEventListener для «Сделано в слушателе кнопки входа для mouseOver».Не только это, но я получаю два из этих сообщений (как только я нажимаю «ОК» в первый раз, он сразу же всплывает снова), я не уверен, почему это не работает, или почему мой метод события щелчка игнорируется иТЕПЕРЬ метод mouseEvent происходит.

Любые мысли или помощь будут оценены, спасибо!

1 Ответ

30 голосов
/ 08 марта 2012

Не по теме: во-первых, наличие элементов, внезапно появляющихся «под» мышью, - это действительно плохой дизайн, и я бы посоветовал изменить его.

По теме: Как уже упоминалось в разделе комментариев, всякий раз, когда элемент управления скрыт или свернут, он прекращает обработку любых входных данных, поэтому вы не будете запускать триггеры.

Вы можетеиспользуйте свойство Opacity для реализации искомого поведения и, кроме того, используйте EventTriggers для MouseEnter и MouseLeave, чтобы иметь возможность разместить там приятную анимацию.Вот как бы я написал этот стиль: 

<Style x:Key="FadeOutButton" TargetType="{x:Type Button}">
    <Style.Triggers>
        <EventTrigger RoutedEvent="Control.MouseEnter">
            <BeginStoryboard>
                <Storyboard >
                    <DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="Opacity"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="Control.MouseLeave">
            <BeginStoryboard>
                <Storyboard >
                    <DoubleAnimation Duration="0:0:1" To="0.2" Storyboard.TargetProperty="Opacity"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

Теперь вернемся к моей первой идее, я бы настоятельно рекомендовал оставить кнопку видимой, даже если мышь не над (непрозрачность = 0,2 в моем примере выше) ииграть со временем анимации.Если это не вариант, вы всегда можете установить длительность анимации 0: 0: 0 и значение непрозрачности ti 0, и вы получите тот же результат, что и видимость (по крайней мере, визуально).

Позже Редактировать: ВыВы должны применить стиль к кнопкам следующим образом: 

<Button Content="my button" Style="{StaticResource FadeOutButton}" Opacity="0.2"/>
...