「東雲 忠太郎」の平凡な日常のできごと

「東雲 忠太郎」の平凡な日常のできごと

2024.03.24
XML
カテゴリ: C#.NET


以下は、WPF でボタンをカスタマイズするサンプルです。このサンプルでは、ボタンの背景色、文字色、およびホバー時の挙動をカスタマイズします。


```xaml

<Window x:Class="CustomButtonSample.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Custom Button Sample" Height="200" Width="300">

    <Window.Resources>

        <!-- ボタンのスタイルを定義 -->

        <Style x:Key="CustomButtonStyle" TargetType="Button">

            <Setter Property="Background" Value="Blue"/>

            <Setter Property="Foreground" Value="White"/>

            <Setter Property="Padding" Value="10"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Border Background="{TemplateBinding Background}"

                                BorderThickness="1"

                                BorderBrush="Black"

                                CornerRadius="5">

                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>

                        </Border>

                        <ControlTemplate.Triggers>

                            <!-- マウスがボタンに乗っているときの挙動 -->

                            <Trigger Property="IsMouseOver" Value="True">

                                <Setter Property="Background" Value="LightBlue"/>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </Window.Resources>

    <Grid>

        <!-- カスタマイズされたボタンの使用 -->

        <Button Content="Click Me" Style="{StaticResource CustomButtonStyle}" Width="100" Height="40" />

    </Grid>

</Window>

```


この XAML コードでは、`Style` 要素内で `Button` の外観をカスタマイズしています。具体的には、背景色を青 (`Blue`)、文字色を白 (`White`)、`Padding` を 10 に設定し、角丸の枠線 (`Border`) を追加しています。また、`ControlTemplate` を使用してボタンのテンプレートをカスタマイズし、マウスがボタン上にある場合の背景色をライトブルー (`LightBlue`) に変更しています。






お気に入りの記事を「いいね!」で応援しよう

Last updated  2024.03.24 11:18:16


【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! -- / --
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x

© Rakuten Group, Inc.
Create a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
Share by: