如何将“Uniform”拉伸属性应用于WPF / XAML中具有渐变的复合路径?

时间:2011-06-21 19:55:26

标签: wpf xaml layout

民间

我试图用XAML矢量绘制我公司的徽标,以便在方便时将其放入UI容器中。

唯一的要求是徽标不会被剪裁或变形,因此“Uniform”拉伸属性正是我所寻找的。

示例“半工作”代码如下:

<Grid Width="160" Height="153" >
    <Rectangle Clip="M 80,0 c 41.793,0 75.879,34.086 75.879,75.878 0,0.75 -0.015,1.496 -0.036,2.24 l -33.846,-57.969 -42.204,80.387 -39.421,-68.175 -35.758,34.917 c 4.294,-37.769 36.501,-67.278 75.386,-67.278 z" Margin="0">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="44,14" Center="44,44" RadiusX="125" RadiusY="125" MappingMode="Absolute">
                <GradientStop Color="#FF1C545C" Offset="0.63"/>
                <GradientStop Color="#FF3BB3C3" Offset="0.23"/>
            </RadialGradientBrush>              
         </Rectangle.Fill>
    </Rectangle>
    <Rectangle Clip="M 151,102 c -10.528,29.287 -38.601,50.33 -71.436,50.33 -36.935,0 -67.845,-26.625 -74.533,-61.662 l 32.586,-31.299 42.204,75.131 44.986,-84.096 26.193,51.596 z">
        <Rectangle.Fill>
            <RadialGradientBrush RadiusY="100" RadiusX="100" GradientOrigin="49,87" Center="49,87" MappingMode="Absolute">
                <GradientStop Color="{DynamicResource MarinhoMiotec}" Offset="0.27"/>
                <GradientStop Color="#FF003052" Offset="0.63"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Grid>

问题是:当我将此网格放在另一个图标大小的网格中时,图形不会缩小以均匀地放入其中。

我猜是这样的,因为绘制矩形的网格具有固定的高度和宽度。我已经尝试创建一个不连续的路径,但后来我不能在徽标的每一半上添加不同的颜色。

我应该选择一个不同的容器,还是应该让坐标相对,或者使用变换,创建一个样式,或者刷一下......我对这么多可能的行动方式感到困惑......

任何帮助都将不胜感激。

感谢您阅读

1 个答案:

答案 0 :(得分:1)

尝试将徽标包装在 ViewBox http://msdn.microsoft.com/en-us/library/system.windows.controls.viewbox.aspx

以下是一个例子:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="150" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="150" />
    </Grid.RowDefinitions>
    <Viewbox>
        <Grid Width="160" Height="153" >
            <Rectangle Clip="M 80,0 c 41.793,0 75.879,34.086 75.879,75.878 0,0.75 -0.015,1.496 -0.036,2.24 l -33.846,-57.969 -42.204,80.387 -39.421,-68.175 -35.758,34.917 c 4.294,-37.769 36.501,-67.278 75.386,-67.278 z" Margin="0">
                <Rectangle.Fill>
                    <RadialGradientBrush GradientOrigin="44,14" Center="44,44" RadiusX="125" RadiusY="125" MappingMode="Absolute">
                        <GradientStop Color="#FF1C545C" Offset="0.63"/>
                        <GradientStop Color="#FF3BB3C3" Offset="0.23"/>
                    </RadialGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Clip="M 151,102 c -10.528,29.287 -38.601,50.33 -71.436,50.33 -36.935,0 -67.845,-26.625 -74.533,-61.662 l 32.586,-31.299 42.204,75.131 44.986,-84.096 26.193,51.596 z">
                <Rectangle.Fill>
                    <RadialGradientBrush RadiusY="100" RadiusX="100" GradientOrigin="49,87" Center="49,87" MappingMode="Absolute">
                        <GradientStop Color="{DynamicResource MarinhoMiotec}" Offset="0.27"/>
                        <GradientStop Color="#FF003052" Offset="0.63"/>
                    </RadialGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
    </Viewbox>
</Grid>

这将在50x50网格单元格中呈现徽标。