NumberBox は数値の入力や取得を行うためのコントロールです。
今回は、数値の設定と習得をする方法について説明します。
環境
開発環境 | Microsoft Visual Studio Professional 2019 Preview Version 16.11.0 Preview 3.0 |
Framework | Microsoft .NET Framework Version 4.8.04084 |
その他 | Microsoft.Project Reunion 0.8.0-preview |
Microsoft.ProjectReunion.Foundation 0.8.0-preview | |
Microsoft.ProjectReunion.WinUI 0.8.0-preview | |
Microsoft.UI.Xaml 2.6.1 |
現在値の設定と取得
現在値の設定と取得をするには 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>
以下は、コードによる値の取得例です。
[数値の取得]ボタンをクリックすると、現在の数値がダイアログに表示されます。
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一覧
Please follow and like us:
コメント