2010-02-03 221 views
2

這個想法是獲得額定值控制,它可能具有0.3的值,並將其繪製爲部分填充的形狀。
我使用的方法在CodeProject文章中有描述。有Path,添加蒙版(矩形),添加輪廓。
用於掩碼和固定寬度路徑的原始代碼Margin
問題是,使用矩形作爲蒙版重新繪製背景,這是漸變,所以我不能爲掩碼設置相同的背景值。 我改變了顏色,以使其更清晰。WPF幾何圖形(路徑)部分填充形狀

是否可以模擬部分填充路徑?

<Page 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> 

    <Grid x:Name="gdStar" Width="Auto" Height="Auto"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="0.5*"/> 
      <ColumnDefinition Width="0.5*"/> 
     </Grid.ColumnDefinitions> 

     <Path 
      Grid.ColumnSpan="2" 
     Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/> 

     <Rectangle Grid.Column="1" 
     Fill="Yellow"/> 

     <Path 
      Grid.ColumnSpan="2" 
      Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/> 

    </Grid> 


</Page> 

編輯
這可能是錯誤的做法。還有什麼可以使用的? OpacityBrush /剪輯?

回答

1

您正在尋找這樣的事情:

<Page 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> 
    <Grid x:Name="gdStar" Width="Auto" Height="Auto"> 
     <Path 
     Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"> 
      <Path.OpacityMask> 
       <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> 
        <GradientStop Color="Transparent" Offset="0.3"/> 
        <GradientStop Color="White" Offset="0.3"/> 
       </LinearGradientBrush> 
      </Path.OpacityMask> 
     </Path> 
     <Path 
      Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/> 
    </Grid> 
</Page> 

編輯這裏是改變通過增加其背後一顆白星填充區域非的背景下一個版本,我已經離開了前面的例子有因爲它更清晰一些。

<Page 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Background="yellow"> 
    <Grid x:Name="gdStar" Width="Auto" Height="Auto"> 
     <Path 
     Fill="White" Stretch="Fill" Stroke="Blue" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/> 
     <Path 
     Fill="Red" Stretch="Fill" Stroke="Blue" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"> 
      <Path.OpacityMask> 
       <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> 
        <GradientStop Color="Transparent" Offset="0.3"/> 
        <GradientStop Color="White" Offset="0.3"/> 
       </LinearGradientBrush> 
      </Path.OpacityMask> 
     </Path> 
     <Path 
      Fill="Transparent" Stretch="Fill" Stroke="Red" StrokeThickness="1" Margin="-0.5,-0.5,-0.5,-0.019" Data="M63.50031,-0.50054431 L47.500523,55.499079 -0.49883747,55.499079 39.50063,95.498578 23.500843,159.49799 63.833676,128.4989 103.7623,160.51698 87.095797,95.850405 127.49946,55.499079 79.500097,55.499079 z"/> 
    </Grid> 
</Page> 
+0

幾乎在那裏。 如果父網格有一些背景 - 黃色作爲例子,那麼路徑的「未填充」部分也將是黃色。它能做到白色嗎? – bybor 2010-02-03 15:56:15

+0

簡單,看第二個例子 – Nir 2010-02-04 11:58:56

+0

顯着!謝謝! – bybor 2010-02-04 15:52:22