Пользовательский стиль управления / триггеры, часть II - переопределение Aero - PullRequest
Новая
       24

Пользовательский стиль управления / триггеры, часть II - переопределение Aero

1 голос
/ 12 марта 2012

Это продолжение Переопределение фона кнопки в WPF на Aero и в незначительной степени Стили / триггеры пользовательского элемента управления .

В попытке сохранитьфункциональность ToggleButton, но избавиться от стиля кнопки, я следовал за процессом первой ссылки выше.Это в основном работает, хотя и с небольшой модификацией изменения RenderMouseOver и RenderPressed на false (В противном случае он ощущал, что мышь находится где-то в окне, а не просто над ToggleButton.

Так что теперь моя проблема, с разметкой ниже, триггер IsMouseOver вообще не меняет фон. Есть идеи посмотреть на XAML?

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

<Style TargetType="{x:Type local:TimePicker}">
    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="Black"
                        BorderThickness="1">
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <ToggleButton VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                      Margin="0"
                                      Background="{TemplateBinding Background}"
                                      BorderBrush="Transparent"
                                      Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Hour}">
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                    <Aero:ButtonChrome SnapsToDevicePixels="True"
                                                       Background="{TemplateBinding Background}"
                                                       BorderBrush="{TemplateBinding BorderBrush}"
                                                       RenderMouseOver="False"
                                                       RenderPressed="False">
                                        <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                          />
                                    </Aero:ButtonChrome>
                                </ControlTemplate>
                            </ToggleButton.Template>
                            <ToggleButton.Style>
                                <Style TargetType="ToggleButton">
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="OverridesDefaultStyle" Value="True" />
                                            <Setter Property="Background" Value="LightGray" />
                                        </Trigger>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="Foreground" Value="Red" />
                                            <Setter Property="FontWeight" Value="Bold" />                                                
                                            <Setter Property="BitmapEffect">
                                                <Setter.Value>
                                                    <OuterGlowBitmapEffect GlowColor="Red" GlowSize="30" />
                                                </Setter.Value>
                                            </Setter>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </ToggleButton.Style>
                        </ToggleButton>
                        <Label HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}"
                               VerticalContentAlignment="{TemplateBinding VerticalAlignment}"
                               Content=":"/>
                        <ToggleButton VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                      Margin="0"
                                      Background="{TemplateBinding Background}"
                                      BorderBrush="Transparent"
                                      Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Minute}" />

                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Ответы [ 2 ]

1 голос
/ 13 марта 2012

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

<Style TargetType="{x:Type local:TimePicker}">
    <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" />
    <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="Transparent"
                        BorderThickness="1">
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Center"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <ToggleButton VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                      Margin="0"                                          
                                      BorderBrush="Transparent"
                                      BorderThickness="0"
                                      Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Hour}">
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                    <Aero:ButtonChrome SnapsToDevicePixels="True"                                                           
                                                       Background="{TemplateBinding Background}"
                                                       BorderBrush="{TemplateBinding BorderBrush}"                                                           
                                                       RenderDefaulted="False">
                                        <Grid>
                                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                            <ContentPresenter x:Name="ContentPart"
                                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                              TextBlock.Foreground="#FF605c" Visibility="Collapsed">
                                                <ContentPresenter.Effect>
                                                    <BlurEffect />
                                                </ContentPresenter.Effect>
                                            </ContentPresenter>
                                        </Grid>
                                    </Aero:ButtonChrome>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="ContentPart" Property="Visibility" Value="Visible" />
                                        </Trigger>
                                        <Trigger Property="IsChecked" Value="True">
                                            <Setter Property="FontWeight" Value="Bold" />
                                            <Setter TargetName="ContentPart" Property="Visibility" Value="Visible" />                                                
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </ToggleButton.Template>
                            <ToggleButton.Style>
                                <Style TargetType="{x:Type ToggleButton}">
                                    <Setter Property="Background" Value="Transparent" />
                                </Style>
                            </ToggleButton.Style>
                        </ToggleButton>
                        <Label HorizontalContentAlignment="{TemplateBinding HorizontalAlignment}"
                               VerticalContentAlignment="{TemplateBinding VerticalAlignment}"
                               Content=":"/>
                        <ToggleButton VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                      Margin="0"
                                      Background="{TemplateBinding Background}"
                                      BorderBrush="Transparent"
                                      Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Minute}" />

                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
1 голос
/ 12 марта 2012

Возможно, фон вашего элемента управления установлен на {x:Null} по умолчанию, попробуйте установить <Setter Property="Background" Value="Transparent"/> {x: Null не обнаружит мышь, прозрачный будет.

Редактировать (дополнение):

OverridesDefaultStyle = Истина должна быть в style.setters, а не в триггере.

Пример: 

<ToggleButton Content="ToggleButton" Height="30" Width="110" >
  <ToggleButton.Style>
    <Style TargetType="ToggleButton">
      <Setter Property="SnapsToDevicePixels" Value="True"/>
      <Setter Property="UseLayoutRounding" Value="True"/>
      <Setter Property="OverridesDefaultStyle" Value="True"/>
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="Background">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#FFFFFF"/>
            <GradientStop Offset="0.48" Color="#DDDDDD"/>
            <GradientStop Offset="0.5" Color="#CCCCCC"/>
            <GradientStop Offset="0.52" Color="#BBBBBB"/>
            <GradientStop Offset="1" Color="#CCCCCC"/>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
      <Setter Property="BorderBrush">
        <Setter.Value>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Offset="0" Color="#DDDDDD"/>
            <GradientStop Offset="0.48" Color="#BBBBBB"/>
            <GradientStop Offset="0.5" Color="#AAAAAA"/>
            <GradientStop Offset="0.52" Color="#999999"/>
            <GradientStop Offset="1" Color="#AAAAAA"/>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
      <Setter Property="HorizontalContentAlignment" Value="Center"/>
      <Setter Property="VerticalContentAlignment" Value="Center"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ToggleButton">
            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" UseLayoutRounding="{TemplateBinding UseLayoutRounding}">
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Border>
            <ControlTemplate.Triggers>
              <MultiTrigger>
                <MultiTrigger.Conditions>
                  <Condition Property="IsMouseOver" Value="True"/>
                  <Condition Property="IsChecked" Value="False"/>
                </MultiTrigger.Conditions>
                <Setter Property="Background">
                  <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                      <GradientStop Offset="0" Color="#FFFFFF"/>
                      <GradientStop Offset="0.48" Color="#EEEEEE"/>
                      <GradientStop Offset="0.5" Color="#DDDDDD"/>
                      <GradientStop Offset="0.52" Color="#CCCCCC"/>
                      <GradientStop Offset="1" Color="#DDDDDD"/>
                    </LinearGradientBrush>
                  </Setter.Value>
                </Setter>
              </MultiTrigger>
              <MultiTrigger>
                <MultiTrigger.Conditions>
                  <Condition Property="IsMouseOver" Value="True"/>
                  <Condition Property="IsChecked" Value="True"/>
                </MultiTrigger.Conditions>
                <Setter Property="BorderBrush" Value="#666666"/>
                <Setter Property="BorderThickness" Value="2,2,1,1"/>
                <Setter Property="Background">
                  <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                      <GradientStop Offset="0" Color="#AAAAAA"/>
                      <GradientStop Offset="0.48" Color="#999999"/>
                      <GradientStop Offset="0.5" Color="#AAAAAA"/>
                      <GradientStop Offset="0.52" Color="#BBBBBB"/>
                      <GradientStop Offset="1" Color="#DDDDDD"/>
                    </LinearGradientBrush>
                  </Setter.Value>
                </Setter>
              </MultiTrigger>
              <MultiTrigger>
                <MultiTrigger.Conditions>
                  <Condition Property="IsChecked" Value="True"/>
                  <Condition Property="IsMouseOver" Value="False"/>
                </MultiTrigger.Conditions>
                <Setter Property="BorderBrush" Value="#333333"/>
                <Setter Property="BorderThickness" Value="2,2,1,1"/>
                <Setter Property="Background">
                  <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                      <GradientStop Offset="0" Color="#999999"/>
                      <GradientStop Offset="0.48" Color="#888888"/>
                      <GradientStop Offset="0.5" Color="#999999"/>
                      <GradientStop Offset="0.52" Color="#AAAAAA"/>
                      <GradientStop Offset="1" Color="#CCCCCC"/>
                    </LinearGradientBrush>
                  </Setter.Value>
                </Setter>
              </MultiTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ToggleButton.Style>
</ToggleButton>

Что касается свечения:

Полностью замените ContentPresenter следующим: 

          <Grid>
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            <ContentPresenter x:Name="ContentPart" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              TextBlock.Foreground="#5588FF" Visibility="Collapsed">
              <ContentPresenter.Effect>
                <BlurEffect />
              </ContentPresenter.Effect>
            </ContentPresenter>
          </Grid>

и добавьте этот простой триггер: 

<Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="ContentPart" Property="Visibility" Value="Visible"/>
                  </Trigger>
...