0

I have been reading about changing the appearance of WPF controls. In most cases though the buttons were created from scratch and thus there were no multiple sources let alone one single image used to display a button, that would properly resize.

I want to display a button, which has a custom look to it. It should be able to load the visual data from an image (preferably PNG-image with per-pixel-alpha), slice it into pieces (please look at the scheme below) and thus resize the button correctly, while keeping as many advantages of the original WPF Button (including text / content, icons, events and binding) as possible.

Is something like this possible?

ここに画像の説明を入力

Is there a way to have a WPF template, that would use a certain imagesource (or perhaps even several separate files if need be) to allow a resizable button (or control in general if this is do-able). This button would contain an icon and some text and it would have an "onMouseOver" image-"template" as well as a "onMouseDown" one.

I know in CSS this is do-able having an image be a whole image-map and use coordinates and clipping rectangles to ensure proper appearance. Does anyone have an idea if this is possible and give me some pointers where I could look for how to "design" my own controls, that derive from known ones?

この特定のケースでは、ボタンと、場合によってはプログレス バーが本当に必要です。ボタンとプログレス バーのスタイルを設定する方法を理解できれば、他の種類のコントロールでそれを行う方法についてのアイデアが得られると思います。

私は .NET Framework 4.5 を使用していますが、このアプリケーションを使用するユーザーも同じフレームワークを使用する必要があります。

前もって感謝します！

4

2 に答える 2

1

グリッドでテンプレート化するだけです。この例では、単色を使用して四角形を塗りつぶしました。これらを、画像内の適切なソース四角形からピクセルを取得する画像ブラシに置き換えるだけです。

<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Button.Template>
        <ControlTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="100"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="50"/>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="100"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="100"/>
                </Grid.ColumnDefinitions>
                <Rectangle Grid.Row="0" Grid.Column="0" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="0" Grid.Column="1" Fill="Yellow"/>
                <Rectangle Grid.Row="0" Grid.Column="2" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="0" Grid.Column="3" Fill="Yellow"/>
                <Rectangle Grid.Row="0" Grid.Column="4" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="1" Grid.Column="0" Fill="Green"/>
                <Rectangle Grid.Row="1" Grid.Column="4" Fill="Green"/>
                <Rectangle Grid.Row="2" Grid.Column="0" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="2" Grid.Column="4" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="3" Grid.Column="0" Fill="Green"/>
                <Rectangle Grid.Row="3" Grid.Column="4" Fill="Green"/>
                <Rectangle Grid.Row="4" Grid.Column="0" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="4" Grid.Column="1" Fill="Yellow"/>
                <Rectangle Grid.Row="4" Grid.Column="2" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="4" Grid.Column="3" Fill="Yellow"/>
                <Rectangle Grid.Row="4" Grid.Column="4" Fill="CornflowerBlue"/>
                <Rectangle Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Fill="Gray"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

結果：

ここに画像の説明を入力

正直に言うと、ここで示したのと同じ手法をそのコントロールが使用している場合でも、これはカスタム UserControl が適切である可能性があるケースの 1 つだと思います。各列と行が分割される正確なポイントは、XAML 全体で複数回参照する必要があります。これらのポイントを依存関係プロパティとしてユーザー コントロールに追加すると、コードがより柔軟になり、カスタマイズが容易になります。最初の 2 つの四角形が XAML でどのように見えるかを説明すると、次のようになります。

<Rectangle Grid.Row="0" Grid.Column="0">
                    <Rectangle.Fill>
                        <ImageBrush ImageSource="http://i.stack.imgur.com/something.jpg" Viewbox="0,0,100,100" ViewboxUnits="Absolute"/>
                    </Rectangle.Fill>
                </Rectangle>
                <Rectangle Grid.Row="0" Grid.Column="1">
                    <Rectangle.Fill>
                        <ImageBrush ImageSource="http://i.stack.imgur.com/something.jpg" Viewbox="100,0,1,100" ViewboxUnits="Absolute" TileMode="None"/>
                    </Rectangle.Fill>
                </Rectangle>

両方の長方形で「something.jpg」が参照されていることに注意してください。UserControl の代わりに Image をテンプレート化すると、Image ソースへの TemplateBinding を使用できますが、行と列をどこで切り取るかという問題が残ります。添付されたプロパティとコンバーターの組み合わせでそれを行うことができますが、それはばかげています。カスタム ユーザー コントロールを作成し、それで完了です。

于 2015-07-29T08:23:49.663 に答える
0

この質問にはすでに答えがありますが、サイズ変更可能なコントロールを自分で扱ったことがあるので、チップを入れると思いました。私のコントロールははるかに「きれいな」外観をしているので、これは一種の異なるアプローチです。自由にサイズ変更できるようにするために、SVG データに依存しています。目標は高い再利用性とカスタマイズ性であり、現在の Windows 10 の外観に非常によく適合します。GitHub は次のとおりです: https://github.com/MarkoPaul0/PrettyNSharp

于 2018-05-09T03:05:00.670 に答える