C#でWPF学習中「RadioButtonに連動してコントロールの表示非表示を切り替え」

C# コンピュータ
C#
2021.06.18
最初、コントロールのVisibilityプロパティにReactiveProperyオブジェクトバインドして、RadioButtonのChekedイベントにReactiveCommandをバインドしReactiveCommandからReactiveProperyオブジェクトを介してVisibilityプロパティを操作するように作りました。
よくよく考えてみると表示非表示の切り替えだけであればViewModelを使わずView(XAML)で処理を完結させることが出来るようです。
BoolVisibilityConverterを使ってRadioBottonのIsCheckedのture又はfalseのbool値をVisble又はHiddenのVisibilityに変換しバインドさせる方法にしてみました。

実行環境

Windows10 2004
dotnet –version 5.0.104
Visual Studio Code
PowerShell 5.1

プロジェクトの作成

mkdir プロジェクト名
cd プロジェクト名
dotnet new wpf
dotnet add package Microsoft.Xaml.Behaviors.Wpf
dotnet add package ReactiveProperty.WPF
code .

ソースコード

ファイル名:MainWindow.xaml

<Window x:Class="WpfSample26RadioButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:i="clr-namespace:Microsoft.Xaml.Behaviors;assembly=Microsoft.Xaml.Behaviors"
        xmlns:local="clr-namespace:WpfSample26RadioButton"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BoolVisibilityConverter" />
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Canvas Grid.Column="0">
            <StackPanel
                Visibility="{Binding Path=IsChecked,ElementName=RadioButton1,Converter={StaticResource BoolVisibilityConverter}}">
                <Label>1</Label>
            </StackPanel>
            <StackPanel
                Visibility="{Binding Path=IsChecked,ElementName=RadioButton2,Converter={StaticResource BoolVisibilityConverter}}">
                <Label>2</Label>
            </StackPanel>
        </Canvas>
        <StackPanel
            Grid.Column="1"
            Margin="10">
            <RadioButton Name="RadioButton1" GroupName="NumberGroup">1</RadioButton>
            <RadioButton Name="RadioButton2" GroupName="NumberGroup">2</RadioButton>
        </StackPanel>
    </Grid>
</Window>

ファイル名:MainWindowViewModel.cs

using System;
using System.ComponentModel;
using Reactive.Bindings;

namespace WpfSample26RadioButton
{
    public class MainWindowViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public MainWindowViewModel()
        {
        }       
    }
}

ViewModelでは特に処理はしない。

説明

起動時はRadioButtonは未チェック

RadioButtonの1をチェックすると連動して左側に1が表示される

RadioButtonの2をチェックすると連動して左側に2が表示される

スポンサーリンク

コメント