[WinUI 3][NumberBox] 数値の設定と取得

NumberBox は数値の入力や取得を行うためのコントロールです。

今回は、数値の設定と習得をする方法について説明します。

環境

現在値の設定と取得

現在値の設定と取得をするには Value プロパティを使用します。

現在値の設定

以下は XAML による現在値の設定例です。この例では、現在値に「10」 を設定しています。

以下を実行する時は「xmlns:muxc=”using:Microsoft.UI.Xaml.Controls”」を追加してください。

<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="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <muxc:NumberBox x:Name="myNumberBox" Value="10" />
    </StackPanel>
</Window>

コードビハインドで、NumberBox に値を設定する例は以下の通りです。

public MainWindow()
{
    this.InitializeComponent();
    myNumberBox.Value = 10;
}

現在値の設定例

現在値の取得

以下は XAML による現在値を取得する例です。 NumberBox の Value を TextBlock の Text プロパティにバインドしています。

<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" Value="10" />
        <TextBlock Text="{x:Bind myNumberBox.Value, Mode=OneWay}" />
    </StackPanel>
</Window>

XAMLによる値の取得

以下は、コードによる値の取得例です。

[数値の取得]ボタンをクリックすると、現在の数値がダイアログに表示されます。

private async void Button_Click(object sender, RoutedEventArgs e)
{
    ContentDialog contentDlg = new ContentDialog
    {
        Title = "NumberBox の値",
        Content = $"{myNumberBox.Value}",
        CloseButtonText = "OK"
    };
    contentDlg.XamlRoot = this.Content.XamlRoot;
    ContentDialogResult result = await contentDlg.ShowAsync();
}

上記に対する XAML は以下の通りです。

<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" Value="10" />
        <Button Content="数値の取得" Click="Button_Click" />
    </StackPanel>
</Window>

コードによる数値の取得例

コードによる数値の取得例

WinUI 3 Tips一覧

WinUI 3 のTips 一覧はこちら

Please follow and like us: