Tạo kiểu Chuột trên nút Silverlight/WPF

Question

Đấu tranh bằng cách tạo kiểu chuột cho nút ... Tôi đã quản lý để tạo kiểu cho nút (màu đỏ), nhưng tôi muốn nó chuyển thành màu đen bất cứ khi nào một con chuột hơn xảy ra. Tôi mới đến XAML, và tôi có thể thấy rằng nó muốn một số loại bảng câu chuyện/hoạt hình ... không chắc chắn chính xác làm thế nào để làm điều này.

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Điều này khác với WPF để Silverlight. Trong WPF, câu trả lời từ Rob là chính xác.

Trong Silverlight, tính năng này sẽ không hoạt động. Silverlight sử dụng VisualStateManager thay vì trình kích hoạt. Mã cho điều này phức tạp hơn, nhưng một số người cảm thấy rằng điều này là tốt hơn. Bạn cần phải tạo mẫu kiểm soát theo phong cách của mình. (Để biết thông tin về cách xác định mẫu điều khiển, hãy xem This Article. Cách dễ nhất để tạo một ControlTemplate tương tự là sử dụng Expression Blend, có chức năng trích xuất mẫu hiện có đầy đủ cho bạn.)

Trong mẫu kiểm soát, xác định VisualState bạn quan tâm và những gì bạn muốn xảy ra.

<VisualStateGroup x:Name="CommonStateGroup"> 
    <VisualState x:Name="MouseOverState"> 
     <Storyboard> 
      <ColorAnimation Storyboard.TargetName="TopmostElementOfTheTemplate" 
             Storyboard.TargetProperty="Foreground" 
             To="Black" 
             Duration="00:00:00" > 
      </ColorAnimation> 
     </Storyboard> 
    </VisualState> 
</VisualStateGroup> 
... 

Điều quan trọng là phải xác định màu nền trước mặc định theo kiểu, như Rob đã làm ở trên. Nếu bạn chỉ định nó trên điều khiển thay vào đó nó sẽ ghi đè các giá trị từ kiểu.

Lưu ý rằng có thể lấy VisualStateManager ra khỏi Bộ công cụ WPF để có một giải pháp tương tự trong WPF.

Answer 2

Trong WPF:

Xác định một kịch bản về tài nguyên của bạn (bất kỳ nơi nào truy cập từ nút hoặc phong cách của nó):

<Window.Resources> 
    <Storyboard x:Key="buttonAnim"> 
     <ColorAnimation Storyboard.TargetName="_back" Storyboard.TargetProperty="Color" To="Red" /> 
    </Storyboard> 
    </Window.Resources> 

Và trong nút, tạo ra một kích hoạt sự kiện mà ra mắt phim hoạt hình:

<Button> 
    <Button.Background> 
     <SolidColorBrush Color="Blue" x:Name="_back" /> 
    </Button.Background> 
    <Button.Triggers> 
     <EventTrigger RoutedEvent="Button.MouseEnter"> 
      <BeginStoryboard Storyboard="{StaticResource buttonAnim}" /> 
     </EventTrigger> 
    </Button.Triggers> 
    Button Text 
</Button> 

Điều bạn muốn tạo hiệu ứng động phải tồn tại rõ ràng. Đây là lý do tại sao nền được đặt rõ ràng là một SolidColorBrush, có màu sắc được thay đổi bởi bảng phân cảnh.

Tất nhiên, điều này nên được thực hiện thông qua một Kiểu.

Silverlight chỉ hỗ trợ sự kiện được tải trên trình kích hoạt, vì vậy bạn cần phải đính kèm trình xử lý sự kiện thực vào nút và khởi động bảng phân cảnh theo chương trình.

Answer 3

Trong WPF, bạn không cần một kịch bản, trừ khi bạn muốn có một hình ảnh động:

<Button Content="Hover me"> 
     <Button.Style> 
      <Style TargetType="Button"> 
       <Setter Property="Background" Value="Red"/> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Background" Value="Black"/> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Button.Style> 
    </Button> 

Answer 4

Đúng, Trình quản lý trạng thái trực quan là chìa khóa ở đây. Tôi vừa tải lên một chủ đề Silverlight miễn phí cho blog của mình http://www.blackspike.com/site/silverlight/free-silverlight-4-beta-skin - bạn có thể giúp mình theo phong cách ở đó, đây là nút xaml cho một nút được tạo kiểu

<SolidColorBrush x:Key="Brush_WindowBackground" Color="#FF333333"/> 

<SolidColorBrush x:Key="Brush_Foreground" Color="#FFE5E5E5"/> 

<SolidColorBrush x:Key="Brush_Highlight" Color="White"/> 

<LinearGradientBrush x:Key="Brush_BackgroundGrad" EndPoint="0.5,1" StartPoint="0.5,0"> 
    <GradientStop Color="#FF3F3F3F" Offset="0"/> 
    <GradientStop Color="#FF353535" Offset="0.3"/> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="Brush_BackgroundGrad_Over" EndPoint="0.5,1" StartPoint="0.5,0"> 
    <GradientStop Color="#FF474747" Offset="0"/> 
    <GradientStop Color="#FF2F2F2F" Offset="0.3"/> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="Brush_BackgroundGrad_Down" EndPoint="0.5,1" StartPoint="0.5,0"> 
    <GradientStop Color="#FF1D1D1D" Offset="0"/> 
    <GradientStop Color="#FF181818" Offset="0.3"/> 
</LinearGradientBrush> 
<SolidColorBrush x:Key="Brush_BorderInner" Color="Black"/> 

<SolidColorBrush x:Key="Brush_BorderOuter" Color="#FF434343"/> 


<Style TargetType="Button"> 
    <Setter Property="Foreground" Value="{StaticResource Brush_Foreground}"/> 
    <Setter Property="FontFamily" Value="Arial"/> 
    <Setter Property="FontSize" Value="12"/> 
    <Setter Property="Padding" Value="15,10"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="0:0:0.2"/> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="background_over" d:IsOptimized="True"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="background_down" d:IsOptimized="True"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Rectangle x:Name="blackframe" Stroke="{StaticResource Brush_BorderOuter}" Fill="{StaticResource Brush_BorderInner}"/> 
        <Rectangle x:Name="background" Margin="2" Fill="{StaticResource Brush_BackgroundGrad}"/> 
        <Rectangle x:Name="background_over" Margin="2" Opacity="0" Fill="{StaticResource Brush_BackgroundGrad_Over}"/> 
        <Rectangle x:Name="background_down" Margin="2" Opacity="0" Fill="{StaticResource Brush_BackgroundGrad_Down}"/> 
        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>