5

私はWPFデザイン（および一般的なデザイン）にかなり慣れていないので、1つのタスクについて支援が必要です。

パスにいくつかのデータを含むボタンのスタイルがあり、その上にアイコンを描画します（基本的には単純に新しいアイコンを追加します）。それからコピーアイコンを作りたいと思います。

Blendで持っているPathで操作する方法が見つからなかったので、私が念頭に置いていたのは次のとおりです。

1）パスデータをコピーして2つのアイコンを描画できるようにします（コンテンツに2つのパスオブジェクトを含めるため）2）最初に少し左と上にシフトします3）次に少し右と下にシフトします4）2番目のアイコンを最初にオーバーラップさせます

これが私がしたことです。コンテンツに2つの要素を設定できないため、1つのグリッド要素を追加し、その中にパス要素を2回コピーしました。次に、重複データをシミュレートするために両方のパスを再配置しました。

<Setter Property="Content">
    <Setter.Value>
    <Grid>
            <Path Data="..." Margin="10" Stretch="Fill" Fill="{StaticResource IconBrush}" RenderTransformOrigin="0.5,0.4">
                <Path.RenderTransform>
                    <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform Angle="-90" />
                <TranslateTransform />
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <Path Data="..." Margin="10" Stretch="Fill" Fill="{StaticResource IconBrush}" RenderTransformOrigin="0.5,0.6">
                <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform Angle="-90" />
                <TranslateTransform />
            </TransformGroup>
        </Path.RenderTransform>
    </Path>                                 
    </Grid>
    </Setter.Value>
</Setter>

問題：2番目のアイコンと重ならない（基本的にすべてが透明です。つまり、おそらく最初のアイコンのいくつかのポイントを削除する必要がありますが、Blendではそれを達成できませんでしたか？

誰かが私が必要なことを達成する方法についていくつかの光を共有できますか？

4

1 に答える 1

6

アイコンがどのように表示されるかはわかりませんが、次の XAML では、Path両方に同じデータを使用して 2 つの重複するプラス記号が表示されますが、2 つ目のプラス記号を簡単TranslateTransformにオフセットできます。

    <Grid>
        <Path Fill="#FF008000" >
            <Path.Data>
                <PathGeometry Figures="m 30 25.362188 0 30.000001 -30 0 0 20 30 0 0 29.999991 20 0 0 -29.999991 30 0 0 -20 -30 0 0 -30.000001 -20 0 z" FillRule="nonzero"/>
            </Path.Data>
        </Path>
        <Path Fill="#FF92D050" >
            <Path.Data>
                <PathGeometry Figures="m 30 25.362188 0 30.000001 -30 0 0 20 30 0 0 29.999991 20 0 0 -29.999991 30 0 0 -20 -30 0 0 -30.000001 -20 0 z" FillRule="nonzero"/>
            </Path.Data>
            <Path.RenderTransform>
                <TranslateTransform X="25" Y="-25"/>
            </Path.RenderTransform>
        </Path>
    </Grid>

実際のパス オブジェクトにマージンや「ストレッチ」プロパティを配置しないことをお勧めします。それらが含まれている Grid コンテナ、またはそれらを拡大または縮小する必要がある場合は、それを含む Viewbox でそれを処理してください。

編集

の代わりにオブジェクトのFillプロパティを実際に使用しPathてアイコン ジオメトリを描画する場合は、オブジェクトの場合と同様に、そもそもを使用したくありません。2 つのオブジェクトを使用し、「IconBrush」でグリッドを塗りつぶし、そのうちの 1 つで必要な量だけ重なるようにします。XAML では、リストの最後に表示されるオブジェクトが一番上に表示されることに注意してください。VisualBrushPath.DataPathRectangleTranslateTransform

編集2

    <Grid>
        <Path Fill="#FFFFFFFF">
            <Path.Data>
                <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/>
            </Path.Data>
        </Path>
        <Path Fill="#FFB3B3B3">
            <Path.Data>
                <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/>
            </Path.Data>
        </Path>
        <Path Fill="#FFFFFFFF">
            <Path.Data>
                <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/>
            </Path.Data>
            <Path.RenderTransform>
                <TranslateTransform X="30" Y="30"/>
            </Path.RenderTransform>
        </Path>
        <Path Fill="#FFB3B3B3">
            <Path.Data>
                <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/>
            </Path.Data>
            <Path.RenderTransform>
                <TranslateTransform X="30" Y="30"/>
            </Path.RenderTransform>
        </Path>
    </Grid>

上記の XAML は、ニーズに対して大きすぎる可能性があります。グリッド全体を に配置し、とのプロパティをViewbox設定して、必要なサイズにすることができます。HeightWidthViewbox

編集3

カスタム ボタン スタイル:

<Style x:Key="btnCustom" TargetType="{x:Type Button}">
    <Setter Property="Content">
        <Setter.Value>
            <Viewbox>
                <Grid Margin="0,0,30,30">
                    <Path Fill="#FFFFFFFF">
                        <Path.Data>
                            <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path Fill="#FFB3B3B3">
                        <Path.Data>
                            <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path Fill="#FFFFFFFF">
                        <Path.Data>
                            <PathGeometry Figures="m 13.123027 65.796864 0 81.448876 133.750213 0 0 -133.778725 -67.192062 0 z" FillRule="NonZero"/>
                        </Path.Data>
                        <Path.RenderTransform>
                            <TranslateTransform X="30" Y="30"/>
                        </Path.RenderTransform>
                    </Path>
                    <Path Fill="#FFB3B3B3">
                        <Path.Data>
                            <PathGeometry Figures="M 79.624708 0.36218262 0 62.950511 l 0 97.411669 160 0 0 -159.99999738 -80.375292 0 z m 2.28303 16.89635038 61.172792 0 0 126.207297 -126.161061 0 0 -76.829978 0.187646 -0.156158 64.800623 0 0 -49.221161 z" FillRule="NonZero"/>
                        </Path.Data>
                        <Path.RenderTransform>
                            <TranslateTransform X="30" Y="30"/>
                        </Path.RenderTransform>
                    </Path>
                </Grid>
            </Viewbox>
        </Setter.Value>
    </Setter>
</Style>

ボタンの実装:

    <Button HorizontalAlignment="Right" Style="{StaticResource btnCustom}"
            Height="30" Width="100"/>

WPF ウィンドウでは次のように表示されます。

ここに画像の説明を入力

于 2012-09-04T14:56:02.967 に答える