Текстовое содержимое эллипса и наведение мыши на цвета - PullRequest
Новая
       40

Текстовое содержимое эллипса и наведение мыши на цвета

1 голос
/ 19 декабря 2011

Мне нужна кнопка, которая представляет собой эллипс с центрированным 'x', который изменит свои цвета при наведении мыши (как на цвет 'x', так и на цвет эллипса).

Похоже на это enter image description here

Следующее получает стандартный внешний вид, который я хочу 

    <Grid>
    <Grid.Resources>
        <Style x:Key="CloseButtonBackgroundStyle" TargetType="{x:Type Ellipse}">
            <Setter Property="Width" Value="25" />
            <Setter Property="Height" Value="25" />
            <Setter Property="Fill" Value="#f4f4f4" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Fill" Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="CloseButtonForegroundStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="#898989" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontSize" Value="16" />
            <Setter Property="Padding" Value="0 0 0 4" />

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="#f9ebeb" />
                </Trigger>
            </Style.Triggers>
        </Style>            
    </Grid.Resources>

    <Ellipse Style="{StaticResource CloseButtonBackgroundStyle}" />

    <TextBlock Text="x"
               Style="{StaticResource CloseButtonForegroundStyle}"/>
</Grid>

Проблема в использовании свойства IsMouseOver. Это работает, но только для каждого элемента управления. то есть, когда я нахожусь над эллипсом, фон становится красным, НО, когда я затем перемещаюсь по текстовому блоку, эллипс больше не наведен на мышь, и поэтому он возвращается к стандартному цвету заливки.

Нужно ли мне изменить свой подход, чтобы содержимое эллипса представляло собой текстовый блок?

Большое спасибо

Ответы [ 2 ]

3 голосов
/ 19 декабря 2011

Проблема в том, что TextBlock на самом деле покрывает больше пространства, чем 'x', потому что шрифты имеют внутреннее заполнение вокруг пикселей, которые образуют букву. Таким образом, мышь на самом деле может быть над TextBlock (а не только на пикселях символа 'x'), и это предотвратит срабатывание вашего другого триггера. Это будет учитывать или / или эффект, который вы испытываете.

Среди других подходов, одна возможность состоит в том, чтобы обернуть оба элемента в шаблон управления ... 

<Grid>
    <Grid.Resources>
        <ControlTemplate x:Key="EllipseWithText" TargetType="{x:Type Button}">
            <Grid x:Name="MainGrid">
                <Rectangle x:Name="MainRectangle" Fill="#00000000" RadiusX="5" RadiusY="5"/>
                <ContentPresenter x:Name="Presenter" 
                              HorizontalAlignment="Center"  VerticalAlignment="Center" 
                              TextBlock.Foreground="#BB225588"/>
                <Path x:Name="Cross" Data="M0,0 L1,1 M0,1 L1,0" 
                              Stretch="Fill" Stroke="Black" 
                              StrokeThickness="2" Width="8" Height="8" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="MainRectangle" Property="Fill" Value="Red"/>
                    <Setter TargetName="MainRectangle" Property="Stroke" Value="Transparent"/>
                    <Setter TargetName="Cross" Property="Stroke" Value="White" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Grid.Resources>
    <Button Height="15" Width="15" Template="{StaticResource EllipseWithText}"/>
</Grid>

Это даст желаемый эффект, когда эллипс станет красным, а 'x' - другим цветом. Обратите внимание, что этот шаблон не использует TextBlock, но вместо этого использует путь. Путь имитирует символ «х». Этот подход вызывает меньше столкновения с недвижимостью и дает эффект, который вы ищете.

1 голос
/ 18 июля 2012

Я знаю, что немного опоздал с этим, но у меня возникла та же проблема.Я пришел к выводу, что установка IsHitTestVisible="False" в TextBlock была более простым решением этой проблемы.

...