3

コンテンツが表示されたユーザー コントロールを描画したいと考えています。基本的に、コンテンツが何であれ、カスタムボックスが必要です。

そのボックスをスケーリングしたいので、ビューボックスを使用しています。残念ながら、ビューボックスは、ボックスのジオメトリだけでなく、表示されているコントロール全体を変換します。これにより、境界線に使用される線が引き伸ばされます。

親ボックスに合わせてベクター パス内のポイントを引き伸ばす必要があるコントロールを次に示します。 親ボックスを埋めるためにスケーリングしたいものは次のとおりです

これが私が得る望ましくない結果です。

ここに画像の説明を入力

線画の太さをスケーリングせずに、ジオメトリをストレッチして塗りつぶす良い方法はありますか?

このような単純なジオメトリを使用して、他のいくつかの方法でこれを実行できることはわかっていますが、実際のアプリケーションでは、パスははるかに複雑です。

興味のある人のための私の制御コードは次のとおりです。

<UserControl.Template>
    <ControlTemplate TargetType="{x:Type UserControl}">
        <Grid>
            <Viewbox Stretch="Fill">
                <Canvas Name="svg2" Margin="0" Width="100" Height="63" >
                    <Path Fill="#FFFFFFFF" Stroke="#FF6800FF" StrokeThickness="4" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeMiterLimit="4" Name="rect2985" RenderTransformOrigin="0,0">
                        <Path.Data>
                            <PathGeometry FillRule="Nonzero" Figures="M 0,250 L 0,50 L 150,50 L 200,-0.96 L 250,50 L 400,50 L 400,250 L 0,250z">
                                <PathGeometry.Transform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX=".24" ScaleY=".23" />
                                    </TransformGroup>
                                </PathGeometry.Transform>
                            </PathGeometry>
                        </Path.Data>

                        <Path.RenderTransform>
                            <TransformGroup>
                                <TranslateTransform X="2.1" Y="3" />
                            </TransformGroup>
                        </Path.RenderTransform>
                    </Path>

                    <Grid Canvas.Top="17" Width="90" HorizontalAlignment="Center" Height="40" Canvas.Left="5">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"        
                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>

                </Canvas>
            </Viewbox>
        </Grid>
    </ControlTemplate>
</UserControl.Template>
4

1 に答える 1

3

ビューボックスを削除し、下の図のように、「境界線」を固定サイズ、水平方向に伸びる部分、垂直方向に伸びる部分に分割します。

コンテンツデコレータ

ここから、列幅 (左から右) が次のようになることがわかります。

  1. 修理済み
  2. 変数/ストレッチ
  3. 修理済み
  4. 変数/ストレッチ
  5. 修理済み

行の高さ (上から下まで) は次のようになります。

  1. 修理済み
  2. 変数/ストレッチ
  3. 修理済み

ここから、xaml グリッドを構築し、「境界線」の各部分を対応する場所に配置できます。このように、コントロールの高さが変更されると、垂直線のみが引き伸ばされます。同様に、コンテンツの幅が変更された場合、水平線のみが引き伸ばされます。

于 2013-03-05T23:22:26.043 に答える