RectangleGeometry với kích thước tương đối ... như thế nào?

Question

Tôi đang cố gắng tái tạo hiệu ứng "phản xạ" ngày nay rất thời trang trên một controltemplate cho các nút mà tôi đang tạo.

Ý tưởng cơ bản là tạo một hình chữ nhật có tô màu gradient từ trắng sang trong suốt và sau đó cắt một số hình chữ nhật bán trong suốt đó bằng phép đo hình chữ nhật.

Vấn đề là tôi không biết cách xác định hình dạng hình chữ nhật tương đối. Tôi loại làm việc xung quanh chiều rộng bằng cách xác định một giá trị lớn (1000), nhưng chiều cao là một vấn đề. Ví dụ, nó hoạt động tốt cho các nút có chiều cao 200, nhưng không làm bất cứ điều gì cho các nút nhỏ hơn.

Bất kỳ ý tưởng nào?

  <Rectangle RadiusX="5" RadiusY="5" StrokeThickness="1" Stroke="Transparent"> 
       <Rectangle.Fill> 
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.55"> 
         <GradientStop Color="#66ffffff" Offset="0.0" /> 
         <GradientStop Color="Transparent" Offset="1.0" /> 
        </LinearGradientBrush> 
       </Rectangle.Fill> 
       <Rectangle.Clip> 
        <RectangleGeometry Rect="0,0,1000,60" /> 
       </Rectangle.Clip> 
      </Rectangle> 

Answer 1

Bạn có thể làm điều này với một MultiBinding và mới IMultiValueConverter:

public class RectangleConverter : IMultiValueConverter 
{ 
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) 
{ 
     // you can pass in the value to divide by if you want 
     return new Rect(0, 0, (double)values[0], (double)values[1]/3.33); 
    } 

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) 
    { 
     throw new NotSupportedException(); 
    } 
} 

Và sử dụng như vậy trong XAML của bạn:

<lcl:RectangleConverter x:Key="rectConverter" /> 

... 

<RectangleGeometry> 
    <RectangleGeometry.Rect> 
     <MultiBinding Converter="{StaticResource rectConverter}"> 
      <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType={x:Type Button}}" /> 
      <Binding Path="ActualHeight" RelativeSource="{RelativeSource AncestorType={x:Type Button}}" /> 
     </MultiBinding> 
    </RectangleGeometry.Rect> 
</RectangleGeometry>