Home > Software design >  WPF binding checkbox states to visibility of 2 seperate buttons
WPF binding checkbox states to visibility of 2 seperate buttons

Time:01-27

So I have this checkbox in WPF.

<CheckBox 

Name="folder_browser" Checked="{}" Unchecked="{}" 
Content="Folder browser" Foreground="Black" 
Grid.Row="5" Grid.Column="0" 
Visibility="{Binding Visibility}">

</CheckBox>

I have to bind its checked and unchecked in such a way that with check, a certain button is visible and when unchecked, a different button. Both are separate buttons. The location of both is same on UI so I am getting confused.

CodePudding user response:

Use a single Button and set its Content by a DataTrigger in a Button Style:

<Button Click="BrowseButtonClicked">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Content" Value="File..."/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsChecked, ElementName=folder_browser}"
                             Value="True">
                    <Setter Property="Content" Value="Folder..."/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

In the Click handler, perform different actions according to the check state of the CheckBox:

private void BrowseButtonClicked(object sender, RoutedEventArgs e)
{
    if (folder_browser.IsChecked == true)
    {
        //...
    }
    else
    {
        //...
    }
}

CodePudding user response:

whenever your view elements cannot have their property directly bind to source, then you need to implement a viewmodel as intermediate translator. I made a simple demo WPF application for you. To repeate what I have done, create a new WPF application project, in MainWindow.xaml, copy following code:

<Window x:Name="window" x:Class="CheckboxAndButtonVisibilityDemo.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:local="clr-namespace:CheckboxAndButtonVisibilityDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <CheckBox IsChecked="{Binding ViewModel.CheckBoxChecked, ElementName=window, Mode=TwoWay}"></CheckBox>
        <Button Visibility="{Binding ViewModel.ButtonAVisibility, ElementName=window, Mode=OneWay}">ButtonA</Button>
        <Button Visibility="{Binding ViewModel.ButtonBVisibility, ElementName=window, Mode=OneWay}">ButtonB</Button>
    </StackPanel>
</Window>

Copy following code into MainWindow.xaml.cs

using System.Windows;

namespace CheckboxAndButtonVisibilityDemo {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
        public ViewModel ViewModel { get; } = new ViewModel();
    }
}

Add a new file, ViewModel.cs, and copy following code into it:

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;

namespace CheckboxAndButtonVisibilityDemo {
    public class ViewModel : INotifyPropertyChanged {
        private bool checkBoxChecked;
        public bool CheckBoxChecked {
            get { return checkBoxChecked; }
            set {
                checkBoxChecked = value;
                if (checkBoxChecked) {
                    ButtonAVisibility = Visibility.Hidden;
                    ButtonBVisibility = Visibility.Visible;
                } else {
                    ButtonAVisibility = Visibility.Visible;
                    ButtonBVisibility = Visibility.Hidden;
                }
                NotifyPropertyChanged();
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void NotifyPropertyChanged([CallerMemberName] String propertyName = null) {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private Visibility buttonAVisibility = Visibility.Visible;
        public Visibility ButtonAVisibility {
            get { return buttonAVisibility; }
            private set {
                buttonAVisibility = value;
                NotifyPropertyChanged();
            }
        }

        private Visibility buttonBVisibility = Visibility.Hidden;
        public Visibility ButtonBVisibility {
            get { return buttonBVisibility; }
            private set {
                buttonBVisibility = value;
                NotifyPropertyChanged();
            }
        }
    }
}

Now its done, run and test it.

  •  Tags:  
  • Related