[WinUI 3][NumberBox] 増分/減分ボタンの表示スタイルを変更する

今回は NumberBox の増分/減分ボタンの表示スタイルを変更する方法について説明します。

環境

数値の増分/減分ステップを変更する

NumberBoxの数値を変更するためのボタンは SpinButtonPlacementMode プロパティでスタイルを変更することができます。

SpinButtonPlacementMode プロパティには、以下の NumberBoxSpinButtonPlacementMode 列挙体の値を指定することができます。

以下に、スタイルを設定する例を示します。

<Window
    x:Class="NumberBoxSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:NumberBoxSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
        <muxc:NumberBox x:Name="myNumberBox"
                        SmallChange="5"
                        LargeChange="10"
                        SpinButtonPlacementMode="Compact"/>
        
        <muxc:NumberBox x:Name="myNumberBox2"
                        SmallChange="5"
                        LargeChange="10"
                        SpinButtonPlacementMode="Inline"
                        Margin="0,30,0,0"/>
    </StackPanel>
</Window>

コードからスタイルを設定する場合は、以下のようにします。

public MainWindow()
{
    this.InitializeComponent();
    myNumberBox1.SpinButtonPlacementMode = NumberBoxSpinButtonPlacementMode.Compact;
    myNumberBox2.SpinButtonPlacementMode = NumberBoxSpinButtonPlacementMode.Inline;
}

スタイルを設定する例

WinUI 3 Tips一覧

WinUI 3 のTips 一覧はこちら

Please follow and like us: