'Graying Out' một hình ảnh nút WPF?

Question

Tôi có một điều khiển đơn giản Button chứa đối tượng Image làm nội dung của nó. Tôi muốn đặt độ mờ là Image thành 0,5 khi số Button bị tắt để cung cấp thêm tín hiệu trực quan về trạng thái Button.

Cách đơn giản nhất để thực hiện kết quả đó trong XAML là gì? Cảm ơn bạn đã giúp đỡ.

Answer 1

Sử dụng trình kích hoạt theo kiểu Hình ảnh. (Nó sẽ tự nhiên hơn khi đặt nó theo kiểu Nút, nhưng kiểu Nút không thể dễ dàng ảnh hưởng đến Ảnh vì lý do kỹ thuật gây phiền nhiễu. Có thể có thể được thực hiện trong ControlTemplate của Nút nhưng quá mức cho những gì bạn muốn ở đây.)

<Button> 
    <Image Source="something.png"> 
    <Image.Style> 
     <Style TargetType="Image"> 
     <Style.Triggers> 
      <Trigger Property="IsEnabled" Value="False"> 
      <Setter Property="Opacity" Value="0.5" /> 
      </Trigger> 
     </Style.Triggers> 
     </Style> 
    </Image.Style> 
    </Image> 
</Button> 

Lưu ý rằng chúng tôi đang tận dụng thực tế là Hình ảnh sẽ bị vô hiệu hóa khi Nút bị vô hiệu hóa, vì vậy chúng tôi có thể kích hoạt trực tiếp trên thuộc tính IsEnabled của riêng ảnh. Trong các trường hợp khác, thuộc tính Button mà chúng ta muốn kích hoạt có thể không được thừa hưởng bởi Image; trong trường hợp đó, chúng ta cần sử dụng một DataTrigger với FindAncestor RelativeSource để liên kết với nút chứa.

Answer 2

Dưới đây là một phong cách chung chung hơn bạn có thể áp dụng:

<Style TargetType="Button"> 
    <Style.Resources> 
     <Style TargetType="Image"> 
      <Style.Triggers> 
       <Trigger Property="IsEnabled" Value="False"> 
        <Setter Property="Opacity" Value="0.5" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Style.Resources> 
</Style> 

Answer 3

Nếu bạn muốn một cái gì đó chung chung hơn, đặt điều này trong phần tài nguyên của bạn cho cửa sổ hoặc UserControl của bạn.

<UserControl.Resources>  
    <Style x:Key="ImageEnabled" TargetType="Image"> 
     <Style.Triggers> 
      <Trigger Property="IsEnabled" Value="False"> 
       <Setter Property="Opacity" Value="0.25"></Setter> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
</UserControl.Resources> 

Và trong nút thực tế chỉ làm điều này

<Button> 
    <Image Source="{StaticResource LinkImage}" Style="{StaticResource ImageEnabled}"/> 
</Button>