XAML でボタンを円として再描画する方法

XAML でボタンを円として再描画する方法
XAML レイアウトを使用する場合、インターフェイスを Metro 風にするために、一部のボタンではデフォルトの四角形ではなく円を使用する必要がある場合があります。次のボタン スタイルはこの問題を解決し、必要に応じて変更できます。もちろん、Bland を使い慣れているなら、それを直接使って必要なスタイルを描画することもできますが、コードを貼り付けたほうが早いでしょうか?

コードをコピー
コードは次のとおりです。

<Style x:Key="btnNext" TargetType="ボタン">
<Setter プロパティ="テンプレート">
<Setter.値>
<コントロールテンプレート ターゲットタイプ="ボタン">
<グリッド>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="共通状態">
<VisualState x:Name="押された">
<ストーリーボード>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="rectangle">
<DiscreteObjectKeyFrame キータイム="0">
<離散オブジェクトキーフレーム.値>
<厚さ>-3</厚さ>
</DiscreteObjectKeyFrame.Value>
</離散オブジェクトキーフレーム>
</オブジェクトアニメーションキーフレームを使用>
</ストーリーボード>
</ビジュアル状態>
<VisualState x:Name="Normal"/>
<VisualState x:Name="無効"/>
<VisualState x:Name="マウスオーバー"/>
</ビジュアル状態グループ>
<VisualStateGroup x:Name="フォーカス状態">
<VisualState x:Name="フォーカス"/>
</ビジュアル状態グループ>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="rectangle" RadiusY="25" RadiusX="25" Stroke="Blue" StrokeThickness="4">
</長方形>
<ContentPresenter Horizo​​ntalAlignment="{TemplateBinding Horizo​​ntalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</グリッド>
</コントロールテンプレート>
</Setter.Value>
</セッター>
<Setter プロパティ="マージン" 値="5"/>
<Setter プロパティ="幅" 値="50"/>
<Setter プロパティ="高さ" 値="50"/>
<Setter プロパティ="FontSize" 値="120"/>
<Setter プロパティ="前景" 値="白"/>
</スタイル>

<<:  VUEのデータプロキシとイベントの詳細な説明

>>:  CSSの優先度を理解する2つの方法

推薦する

HTML 特殊文字変換表

キャラクター小数点文字番号エンティティ名---未使用空間---スペースバー! ! ---感嘆符「 」...

VueとVueComponentの関係の詳細な説明

次のケースでは、これまでに学んだプロトタイプチェーンの知識ポイントを確認します。 // コンストラク...

JavaScript 型検出方法の例のチュートリアル

序文JavaScriptはWebフロントエンドで広く使われている言語の一つであり、Webアプリケーシ...

Mysqlツリー再帰クエリの実装方法

序文部門テーブルなどのデータベース内のツリー構造データの場合、部門のすべての従属部門または部門のすべ...

フロントエンド開発者のための HTML 入門

1 HTML入門1.1 初めてのコード体験、最初のウェブページの作成XML/HTML コードコンテン...

入力のid属性とname属性の違いの例

長い間ウェブサイトを作ってきましたが、入力時のnameとidの違いがまだわかりません。最近jQuer...

Vue-Jest自動テストの基本構成の詳しい説明

目次インストール構成よくある間違い事前テスト作業依存関係の扱いインスタンスとDOMを生成する要約する...

VUE+Canvasはデスクトップピンボールブロック破壊ゲームのサンプルコードを実装します

誰もがピンボールやレンガ崩しのゲームをプレイしたことがあるでしょう。左と右のキーを使用して、下にある...

jsはポップアップウィンドウをクリックすることでポップアップログインボックスを実装します

この記事では、ポップアップウィンドウをクリックしたときにポップアップログインボックスを実現するための...

Linux ディスクとディスク パーティションを理解するための記事

序文Linux システムのすべてのハードウェア デバイスは、ファイルの形式で表現され、使用されます。...

セマンティック HTML タグの紹介

ここ数年、ウェブサイト開発では DIV+CSS が非常に人気があり、当時は大きな騒動を引き起こしまし...

dockerプライベート倉庫の構築と利用の詳細説明

1. リポジトリイメージをダウンロードする docker プルレジストリ 2. プライベートウェアハ...

Ubuntuでネットワークルーティングテーブルを表示する方法

Linux におけるルーティングとルーティング テーブルとは何ですか?ルーティングのプロセスとは、ネ...

CentOS7 での MySQL 8.0.16 のインストールと設定のチュートリアル

MySQLの古いバージョンをアンインストールします(古いバージョンがない場合は、この手順をスキップし...

QQtabBar による CSS 命名仕様 BEM の詳細な紹介

QQtabBar の BEMまず、BEMとはどういう意味でしょうか? BEM は、ブロック、要素、修...