[WinUI 3][RatingControl] 基本使用方法

スポンサーリンク

RatingControl はユーザーが自分の評価値を入力できるようにするためのコントロールです。

この記事では RatingControl の基本使用方法について説明します。

スポンサーリンク

環境

開発環境Microsoft Visual Studio Professional 2019 Preview
Version 16.11.0 Preview 3.0
FrameworkMicrosoft .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
スポンサーリンク

RatingControl を表示する

以下に RatingControl を表示する XAML の例を示します。

XAML 中に <RatingControl /> を配置するだけで、RatingControl を使用できるようになります。

XAML の例

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

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
        <RatingControl />
    </StackPanel>
</Window>
RatingControl の使用例

RatingControl の使用例

スポンサーリンク

評価値を設定する

RatingControl の評価値(塗り潰す星の数)は Value プロパティで取得/設定することができます。既定値は null になっており、1つも塗りつぶされていない状態です。

以下は、アプリ起動時に星を5つ塗りつぶした状態で表示する例です。

XAML の例

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

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
        <RatingControl x:Name="myRating"
                       Value="5"/>
    </StackPanel>
</Window>

C#の例

public MainWindow()
{
    this.InitializeComponent();
    myRating.Value = 5;
}
Value の設定

Value の設定

スポンサーリンク

評価値を取得する

今度は評価値を取得してみましょう。

以下は、XAML のみで評価値を取得する例です。評価値が変更されると TextBlock に現在値が表示されます。

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

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
        <RatingControl x:Name="myRating"
                       Value="5"/>
        <TextBlock Text="{x:Bind myRating.Value, Mode=OneWay}"/>
    </StackPanel>
</Window>
XAML で評価値を取得する例

XAML で評価値を取得する例

以下は XAML と C# で 評価値を取得する例です。Button をクリックした時に RatingControl の Value を TextBlock に表示します・

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

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
        <RatingControl x:Name="myRating"
                       Value="5"/>
        <Button x:Name="myButton" Click="myButton_Click" />
        <TextBlock x:Name="myTextBlock"/>
    </StackPanel>
</Window>

C#

private void myButton_Click(object sender, RoutedEventArgs e)
{
    myTextBlock.Text = myRating.Value.ToString();
}
XAML と C# で評価値を取得する例

XAML と C# で評価値を取得する例

Please follow and like us:

コメント

タイトルとURLをコピーしました