Mahapps.Metro TextBox - ClearTextButton自定義樣式

我正在開發我的第一個WPF應用程序，並決定使用Mahapps.Metro樣式。我有這樣一個文本框在我的意見之一：Mahapps.Metro TextBox - ClearTextButton自定義樣式

<TextBox x:Name="txtMy" Style="{StaticResource My_TxtBox}" 
     Controls:TextBoxHelper.Watermark="My..." 
     Controls:TextBoxHelper.ClearTextButton="True" 
     Grid.Row="1" Grid.Column="0" />

注：xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

這是我的文本框樣式：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:local="clr-namespace:MyApp.Resources.Styles"> 
    <Style x:Key="My_TxtBox" BasedOn="{StaticResource {x:Type TextBox}}" 
      TargetType="{x:Type TextBox}"> 
     <Setter Property="VerticalContentAlignment" Value="Center" /> 
     <Setter Property="FontSize" Value="15" /> 
     <Setter Property="Height" Value="40" /> 
     <Setter Property="Margin" Value="4" /> 
     <Setter Property="Foreground" Value="White" /> 
     <Setter Property="Background"> 
      <Setter.Value> 
       <SolidColorBrush Color="#232228" Opacity="0.6" /> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="BorderBrush"> 
      <Setter.Value> 
       <SolidColorBrush Color="#1ABC9C" Opacity="0.6" /> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary>

現在，我的問題是：如何能我將自定義樣式添加到ClearTextButton，即，我想要在ClearTextButton被徘徊或按下時更改它的背景顏色？我該怎麼做？

我在問這個，因爲我在互聯網上沒有發現任何類似的東西。

在此先感謝

來源

2017-07-14 PeMaCN

有什麼建議？ – PeMaCN

您需要修改控件模板中的相應觸發器。

下面是該修改的樣式：

XAML：

<SolidColorBrush x:Key="MyMouseOverBackground" Color="LightCoral"></SolidColorBrush> 
    <SolidColorBrush x:Key="MyMouseOverForeground" Color="Red"></SolidColorBrush> 
    <SolidColorBrush x:Key="MyPressedBackground" Color="LightBlue"></SolidColorBrush> 
    <SolidColorBrush x:Key="MyPressedForeground" Color="Blue"></SolidColorBrush> 

    <Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}"> 
     <Setter Property="Height" Value="50"/> 
     <Setter Property="Background" Value="{DynamicResource ControlBackgroundBrush}"/> 
     <Setter Property="BorderBrush" Value="{DynamicResource TextBoxBorderBrush}"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="CaretBrush" Value="{DynamicResource BlackBrush}"/> 
     <Setter Property="ContextMenu" Value="{DynamicResource TextBoxMetroContextMenu}"/> 
     <Setter Property="Controls:ControlsHelper.FocusBorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}"/> 
     <Setter Property="Controls:ControlsHelper.MouseOverBorderBrush" Value="{DynamicResource TextBoxMouseOverBorderBrush}"/> 
     <Setter Property="Controls:TextBoxHelper.ButtonFontSize" Value="{DynamicResource ClearTextButtonFontSize}"/> 
     <Setter Property="Controls:TextBoxHelper.ButtonWidth" Value="22"/> 
     <Setter Property="Controls:TextBoxHelper.IsMonitoring" Value="True"/> 
     <Setter Property="FontFamily" Value="{DynamicResource ContentFontFamily}"/> 
     <Setter Property="FontSize" Value="{DynamicResource ContentFontSize}"/> 
     <Setter Property="Foreground" Value="{DynamicResource TextBrush}"/> 
     <Setter Property="MinHeight" Value="26"/> 
     <Setter Property="Padding" Value="0"/> 
     <Setter Property="SelectionBrush" Value="{DynamicResource HighlightBrush}"/> 
     <Setter Property="SnapsToDevicePixels" Value="True"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type TextBox}"> 
        <ControlTemplate.Resources> 
         <Storyboard x:Key="enterGotFocus"> 
          <DoubleAnimation Duration="0:0:0.2" To="0.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Message"/> 
         </Storyboard> 
         <Storyboard x:Key="exitGotFocus"> 
          <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Message"/> 
         </Storyboard> 
         <Storyboard x:Key="enterHasText"> 
          <DoubleAnimation Duration="0:0:0.2" From="0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Message"/> 
         </Storyboard> 
         <Storyboard x:Key="exitHasText"> 
          <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Message"/> 
         </Storyboard> 
        </ControlTemplate.Resources> 
        <Grid> 
         <AdornerDecorator x:Name="PART_WaitingForDataEffectAdornerDecorator" Visibility="Collapsed"> 
          <AdornerDecorator.CacheMode> 
           <BitmapCache EnableClearType="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
          </AdornerDecorator.CacheMode> 
          <Border x:Name="PART_WaitingForDataEffectGrid" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
         </AdornerDecorator> 
         <Border x:Name="Base" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
         <Grid x:Name="PART_InnerGrid" Margin="2"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition x:Name="TextColumn" Width="*"/> 
           <ColumnDefinition x:Name="ButtonColumn" Width="Auto"/> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition x:Name="ButtonRow" Height="*"/> 
          </Grid.RowDefinitions> 
          <ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" Background="{x:Null}" Grid.Column="0" IsTabStop="False" Margin="2" Grid.Row="1" VerticalAlignment="Stretch"/> 
          <TextBlock x:Name="PART_Message" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="6,2" Opacity="0.6" Padding="{TemplateBinding Padding}" Grid.Row="1" TextAlignment="{TemplateBinding Controls:TextBoxHelper.WatermarkAlignment}" Text="{TemplateBinding Controls:TextBoxHelper.Watermark}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
          <ContentControl x:Name="PART_FloatingMessageContainer" Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" Style="{DynamicResource FloatingMessageContainerStyle}"> 
           <TextBlock x:Name="PART_FloatingMessage" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Style="{DynamicResource MetroAutoCollapsingTextBlock}" TextAlignment="{TemplateBinding Controls:TextBoxHelper.WatermarkAlignment}" Text="{TemplateBinding Controls:TextBoxHelper.Watermark}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
          </ContentControl> 
          <Button x:Name="PART_ClearText" ContentTemplate="{TemplateBinding Controls:TextBoxHelper.ButtonContentTemplate}" Content="{TemplateBinding Controls:TextBoxHelper.ButtonContent}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" Focusable="False" FontSize="{TemplateBinding Controls:TextBoxHelper.ButtonFontSize}" FontFamily="{TemplateBinding Controls:TextBoxHelper.ButtonFontFamily}" IsTabStop="False" Controls:TextBoxHelper.IsClearTextButtonBehaviorEnabled="{Binding (Controls:TextBoxHelper.ClearTextButton), Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" Grid.Row="0" Grid.RowSpan="2" Style="{DynamicResource ChromelessButtonStyle}" Width="{TemplateBinding Controls:TextBoxHelper.ButtonWidth}"> 
           <Button.Visibility> 
            <Binding Mode="OneWay" Path="(Controls:TextBoxHelper.ClearTextButton)" RelativeSource="{RelativeSource TemplatedParent}"> 
             <Binding.Converter> 
              <BooleanToVisibilityConverter/> 
             </Binding.Converter> 
            </Binding> 
           </Button.Visibility> 
          </Button> 
         </Grid> 
         <Border x:Name="DisabledVisualElement" BorderBrush="{DynamicResource ControlsDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{DynamicResource ControlsDisabledBrush}" IsHitTestVisible="False" Opacity="0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Visibility="{Binding (Controls:ControlsHelper.DisabledVisualElementVisibility), Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"/> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <DataTrigger Binding="{Binding (Controls:TextBoxHelper.ButtonsAlignment), RelativeSource={RelativeSource Self}}" Value="Left"> 
          <Setter Property="Width" TargetName="ButtonColumn" Value="*"/> 
          <Setter Property="Grid.Column" TargetName="PART_ClearText" Value="0"/> 
          <Setter Property="Grid.Column" TargetName="PART_ContentHost" Value="1"/> 
          <Setter Property="Grid.Column" TargetName="PART_Message" Value="1"/> 
          <Setter Property="Width" TargetName="TextColumn" Value="Auto"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource Self}}" Value=""> 
          <Setter Property="Visibility" TargetName="PART_Message" Value="Visible"/> 
         </DataTrigger> 
         <MultiDataTrigger> 
          <MultiDataTrigger.Conditions> 
           <Condition Binding="{Binding IsVisible, RelativeSource={RelativeSource Self}}" Value="True"/> 
           <Condition Binding="{Binding (Controls:TextBoxHelper.UseFloatingWatermark), RelativeSource={RelativeSource Self}}" Value="True"/> 
           <Condition Binding="{Binding (Controls:TextBoxHelper.HasText), RelativeSource={RelativeSource Self}}" Value="True"/> 
          </MultiDataTrigger.Conditions> 
          <MultiDataTrigger.EnterActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation Duration="0:0:0.2" From="0" To="15" Storyboard.TargetProperty="MaxHeight" Storyboard.TargetName="PART_FloatingMessageContainer"> 
              <DoubleAnimation.EasingFunction> 
               <ExponentialEase EasingMode="EaseInOut" Exponent="2"/> 
              </DoubleAnimation.EasingFunction> 
             </DoubleAnimation> 
             <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_FloatingMessageContainer"/> 
             <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Storyboard.TargetName="PART_FloatingMessage"> 
              <DoubleAnimation.EasingFunction> 
               <ExponentialEase EasingMode="EaseOut" Exponent="2"/> 
              </DoubleAnimation.EasingFunction> 
             </DoubleAnimation> 
            </Storyboard> 
           </BeginStoryboard> 
          </MultiDataTrigger.EnterActions> 
          <MultiDataTrigger.ExitActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation Duration="0:0:0.2" From="15" To="0" Storyboard.TargetProperty="MaxHeight" Storyboard.TargetName="PART_FloatingMessageContainer"> 
              <DoubleAnimation.EasingFunction> 
               <ExponentialEase EasingMode="EaseInOut" Exponent="2"/> 
              </DoubleAnimation.EasingFunction> 
             </DoubleAnimation> 
             <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_FloatingMessageContainer"/> 
             <DoubleAnimation Duration="0:0:0.2" To="20" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Storyboard.TargetName="PART_FloatingMessage"> 
              <DoubleAnimation.EasingFunction> 
               <ExponentialEase EasingMode="EaseIn" Exponent="2"/> 
              </DoubleAnimation.EasingFunction> 
             </DoubleAnimation> 
            </Storyboard> 
           </BeginStoryboard> 
          </MultiDataTrigger.ExitActions> 
         </MultiDataTrigger> 
         <MultiDataTrigger> 
          <MultiDataTrigger.Conditions> 
           <Condition Binding="{Binding (Controls:TextBoxHelper.ButtonsAlignment), RelativeSource={RelativeSource Self}}" Value="Right"/> 
           <Condition Binding="{Binding (Controls:TextBoxHelper.ClearTextButton), RelativeSource={RelativeSource Self}}" Value="False"/> 
          </MultiDataTrigger.Conditions> 
          <Setter Property="Grid.ColumnSpan" TargetName="PART_ContentHost" Value="2"/> 
          <Setter Property="Grid.ColumnSpan" TargetName="PART_Message" Value="2"/> 
         </MultiDataTrigger> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="BorderBrush" TargetName="Base" Value="{Binding (Controls:ControlsHelper.MouseOverBorderBrush), RelativeSource={RelativeSource TemplatedParent}}"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="False"> 
          <Setter Property="Opacity" TargetName="DisabledVisualElement" Value="0.6"/> 
         </Trigger> 
         <Trigger Property="IsReadOnly" Value="True"> 
          <Setter Property="IsEnabled" TargetName="PART_ClearText" Value="False"/> 
         </Trigger> 
         <Trigger Property="IsFocused" Value="True"> 
          <Setter Property="BorderBrush" TargetName="Base" Value="{Binding (Controls:ControlsHelper.FocusBorderBrush), RelativeSource={RelativeSource TemplatedParent}}"/> 
          <Setter Property="Foreground" TargetName="PART_FloatingMessage" Value="{DynamicResource AccentColorBrush}"/> 
          <Setter Property="Opacity" TargetName="PART_FloatingMessage" Value="1"/> 
         </Trigger> 
         <!-- 
         <Trigger Property="IsMouseOver" SourceName="PART_ClearText" Value="True"> 
          <Setter Property="Background" TargetName="PART_ClearText" Value="{DynamicResource GrayBrush8}"/> 
          <Setter Property="Foreground" TargetName="PART_ClearText" Value="{DynamicResource AccentColorBrush}"/> 
         </Trigger> 
         <Trigger Property="IsPressed" SourceName="PART_ClearText" Value="True"> 
          <Setter Property="Background" TargetName="PART_ClearText" Value="{DynamicResource BlackBrush}"/> 
          <Setter Property="Foreground" TargetName="PART_ClearText" Value="{DynamicResource WhiteBrush}"/> 
         </Trigger> 
         --> 
         <Trigger Property="IsMouseOver" SourceName="PART_ClearText" Value="True"> 
          <Setter Property="Background" TargetName="PART_ClearText" Value="{DynamicResource MyMouseOverBackground}"/> 
          <Setter Property="Foreground" TargetName="PART_ClearText" Value="{DynamicResource MyMouseOverForeground}"/> 
         </Trigger> 
         <Trigger Property="IsPressed" SourceName="PART_ClearText" Value="True"> 
          <Setter Property="Background" TargetName="PART_ClearText" Value="{DynamicResource MyPressedBackground}"/> 
          <Setter Property="Foreground" TargetName="PART_ClearText" Value="{DynamicResource MyPressedForeground}"/> 
         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="Controls:TextBoxHelper.HasText" Value="False"/> 
           <Condition Property="IsFocused" Value="True"/> 
          </MultiTrigger.Conditions> 
          <MultiTrigger.EnterActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation Duration="0:0:0.2" To="0.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Message"/> 
            </Storyboard> 
           </BeginStoryboard> 
          </MultiTrigger.EnterActions> 
          <MultiTrigger.ExitActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Message"/> 
            </Storyboard> 
           </BeginStoryboard> 
          </MultiTrigger.ExitActions> 
         </MultiTrigger> 
         <Trigger Property="Controls:TextBoxHelper.HasText" Value="True"> 
          <Trigger.EnterActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation Duration="0:0:0.2" From="0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Message"/> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.EnterActions> 
          <Trigger.ExitActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Message"/> 
            </Storyboard> 
           </BeginStoryboard> 
          </Trigger.ExitActions> 
         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsVisible" Value="True"/> 
           <Condition Property="Controls:TextBoxHelper.IsWaitingForData" Value="True"/> 
          </MultiTrigger.Conditions> 
          <MultiTrigger.EnterActions> 
           <BeginStoryboard> 
            <Storyboard> 
             <DoubleAnimation AutoReverse="True" Timeline.DesiredFrameRate="30" Duration="0:0:2" From="0" RepeatBehavior="Forever" To="1" Storyboard.TargetProperty="(Effect).Opacity" Storyboard.TargetName="PART_WaitingForDataEffectGrid"/> 
            </Storyboard> 
           </BeginStoryboard> 
          </MultiTrigger.EnterActions> 
          <Setter Property="Visibility" TargetName="PART_WaitingForDataEffectAdornerDecorator" Value="Visible"/> 
          <Setter Property="Effect" TargetName="PART_WaitingForDataEffectGrid" Value="{DynamicResource WaitingForDataEffect}"/> 
         </MultiTrigger> 
         <Trigger Property="Controls:TextBoxHelper.IsWaitingForData" Value="False"> 
          <Setter Property="Visibility" TargetName="PART_WaitingForDataEffectAdornerDecorator" Value="Collapsed"/> 
          <Setter Property="Effect" TargetName="PART_WaitingForDataEffectGrid" Value="{x:Null}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Validation.ErrorTemplate" Value="{DynamicResource ValidationErrorTemplate}"/> 
    </Style>

來源

2017-07-16 00:14:22 jsanalytics

感謝您提供的解決方案。它運作良好 – PeMaCN

你想達到什麼不是特定於Mahapps。您必須修改文本框模板才能實現此目的。

模板裏面你會看到鼠標懸停觸發它看起來像這樣：

<Trigger Property="IsMouseOver" Value="True"> 
    <Setter TargetName="Base" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Controls:ControlsHelper.MouseOverBorderBrush)}" /> 
</Trigger>

只需添加額外的引領者觸發器內的背景。

<Setter Property="Background" TargetName="Base" Value="Red"/>

做到這一點的其他方法是重寫的文本框的默認 mahapps風格。（這會影響項目中的所有的tetboxes的）。將Mahapps sources添加到您的項目中，然後在MahApps.Metro/Styles/Controls.TextBox.xaml中，您將看到需要修改的相同觸發器。

來源

2017-07-15 11:34:12

如果我這樣做，那麼我在TextBox中丟失了ClearTextButton。 @Jason你能否發佈整個示例以防我誤解了某些內容？ – PeMaCN

Mahapps.Metro TextBox - ClearTextButton自定義樣式

回答

相關問題