Question

I am a C++ Developer and have recently shifted to C#. I am developing a WPF app where I need to generate Ui components like buttons, textbox etc dynamically. This is how i have done till now.

XAML Class:

<Grid Visibility="{Binding IsAvailable, Converter={StaticResource booltovisibility}}">
    <Grid.Resources>
        <convert:BooleanToVisibilityConverter x:Key="booltovisibility"/>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="170" />
        <ColumnDefinition />
        <ColumnDefinition Width="130" />
        <ColumnDefinition Width="115" />
    </Grid.ColumnDefinitions>
    <Label Grid.Column="0" Content="{Binding ChannelName}" Height="25" Width="120" Name="VoltageLabel" Margin="20,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" />
    <TextBox Grid.Column="1" Text="{Binding VoltageText}" Height="25" Width="65" Name="VoltageBox" Margin="0,0,80,0" VerticalAlignment="Center" HorizontalAlignment="Center" />
    <Button Grid.Column="1" Content="Set" CommandParameter="{Binding VoltageText}" Command="{Binding VoltageCommand}" Height="25" Width="65" Name="VoltageSetbtn" Margin="80,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" />
    <Label Grid.Column="2" Content="{Binding CurrentText}"  Height="25" Width="40" Name="CurrentLabel" Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" />
    <ToggleButton Grid.Column="3" Content="On"  Height="25" Width="30" Name="VoltageToggleBtn" Margin="0,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>

<Button Content="Bavaria" Name="BavariaBtn" Click="BavariaBtn_Click" />

ViewModel Class:

public List<VoltageBoardChannel> channelList = null;       

    public List<VoltageBoardChannel> bavaria2Channels = new List<VoltageBoardChannel>
    {
         new VoltageBoardChannel { ChannelName = "VDD__MAIN", IsAvailable = true, VoltageText = String.Empty, VoltageCommand = m_voltageCommand },
         new VoltageBoardChannel { ChannelName = "VDD__IO__AUD", IsAvailable = true, VoltageText = String.Empty, VoltageCommand = m_voltageCommand },
         new VoltageBoardChannel { ChannelName = "VDD__CODEC__AUD", IsAvailable = true, VoltageText = String.Empty, VoltageCommand = m_voltageCommand},
         new VoltageBoardChannel { ChannelName = "VDD__DAL__AUD", IsAvailable = true, VoltageText = String.Empty, VoltageCommand = m_voltageCommand },
         new VoltageBoardChannel { ChannelName = "VDD__DPD__AUD", IsAvailable = true, VoltageText = String.Empty, VoltageCommand = m_voltageCommand },
         new VoltageBoardChannel { ChannelName = "VDD__PLL__AUD", IsAvailable = true, VoltageText = String.Empty, VoltageCommand = m_voltageCommand },        
         new VoltageBoardChannel { ChannelName = "", IsAvailable = false, VoltageText = String.Empty, VoltageCommand = m_voltageCommand },
         new VoltageBoardChannel { ChannelName = "", IsAvailable = false, VoltageText = String.Empty, VoltageCommand = m_voltageCommand }
    };

    private ICommand m_voltageCommand;        

    public List<VoltageBoardChannel> bavaria1Channels = new List<VoltageBoardChannel>
    {
         new VoltageBoardChannel { ChannelName = "", IsAvailable = false, VoltageText = String.Empty, VoltageCommand = m_voltageCommand },
         new VoltageBoardChannel { ChannelName = "", IsAvailable = false, VoltageText = String.Empty, VoltageCommand = m_voltageCommand }
         new VoltageBoardChannel { ChannelName = "VDD__MAIN", IsAvailable = true, VoltageText = String.Empty, VoltageCommand = m_voltageCommand },
         new VoltageBoardChannel { ChannelName = "VDD__IO", IsAvailable = true, VoltageText = String.Empty, VoltageCommand = m_voltageCommand },
         new VoltageBoardChannel { ChannelName = "VDD__CODEC", IsAvailable = true, VoltageText = String.Empty, VoltageCommand = m_voltageCommand },
         new VoltageBoardChannel { ChannelName = "VDD__LDO", IsAvailable = true, VoltageText = String.Empty, VoltageCommand = m_voltageCommand },
         new VoltageBoardChannel { ChannelName = "VDD__AMP", IsAvailable = true, VoltageText = String.Empty, VoltageCommand = m_voltageCommand }             
    };            

    public VoltageViewModel()
    {
        channelList = new List<VoltageBoardChannel>(0);
        channelList = bavaria1Channels;            
        m_voltageCommand = new DelegateVoltageCommand(x => SetCommandExecute(x));
    }

    public List<VoltageBoardChannel> VoltageChannelList
    {
        get 
        { 
            return channelList; 
        }

        set
        { 
            channelList = value;
            OnPropertyChanged("ChannelList");
        }
    }        

    public void SetCommandExecute(object voltageText)
    {
        Debug.WriteLine(voltageText);
    }

Model Class:

private string mChannelName;
    public string ChannelName
    {
        get; set;
    }

    private bool mIsAvailable;
    public bool IsAvailable
    {
        get; set;
    }

    string voltageText = string.Empty;
    public string VoltageText
    {
        get; set;
    }

    string currentText = "0 V";
    public string CurrentText
    {
        get; set;
    }

    public ICommand VoltageCommand { get; set; }

XAml.cs:

 VoltageViewModel mVoltageViewModel = new VoltageViewModel();

    public VoltageView()
    {
        InitializeComponent();
        this.DataContext = mVoltageViewModel;

        OnChildAdd();
    }
public void OnChildAdd() //Constructor
    {   
        VoltageViewModel mVoltageViewModel = new VoltageViewModel();         
        foreach (VoltageBoardChannel mVoltageChannelViewModel in mVoltageViewModel.VoltageChannelList)
        {
            VoltageChannelView mVoltageChannelView = new VoltageChannelView();
            mVoltageChannelView.Margin = new Thickness(2);
            mVoltageChannelView.ChannelInfo = mVoltageChannelViewModel;
            // Some Code
        }
    }

Here It displays all the channels of Bavaria 1 even the one’s where available = false. Thus when its false, it displays the textbox, button, label and togglebutton. The Channelname is “”. I wanna to achieve the following:

I have 2 channels here, bavaria 1 and bavaria 2. On startup bavaria1 is already displayed. Here I want to check for available channels and add only those to my view on startup i.e. available = true should be displayed and when available = false, the corresponding element should not be displayed. Currently even available = false gets displayed with button, textbox, togglebutton except label(Channelname will be “”). How can i achieve that?

Answer 1

In order to hide an element in XAML using a boolean binding, you need to convert it, since the Visibility property of elements is not a boolean field.

<ListBox ItemsSource="{Binding VoltageChannelList}">
  <ListBox.Resources>
    <BooleanToVisibilityConverter x:Key="booltovisibility"/>
  </ListBox.Resources>
  <Grid Visibility="{Binding IsAvailable,
                     Converter={StaticResource booltovisibility}}">
     <!-- controls -->
  </Grid>
</ListBox>

Using the default BooleanToVisibility converter.

---

With that said, you should probably change VoltageChannelList to an ObservableCollection so when you insert or remove items, the change is reflected to your view.

Also note that when you use autoproperties you don’t create a backing field

private bool mIsAvailable; // this is not used by the property below
public bool IsAvailable { get; set; }

when using this code mIsAvailable is never returned from a call to IsAvailable, since it creates its own backing field.