Bool to Visibility Converter in WPF

Question

I have three radio buttons and three group boxes and based on the selection of the radio button, group box should have been visible or collapsed, but nothing seems to work here. The code for my constructor gets executed, but still it seems things are overlapping each other.

<baseControls:MaintainTemplate Style="{StaticResource {x:Type baseControls:MaintainTemplate}}" TitleText="{Binding TitleText}">

    <baseControls:MaintainTemplate.TabSection>
        <Grid>
            <GroupBox>
                <GroupBox.Header>
                    <TextBlock Text="Case Information" Style="{StaticResource TextBlockWhite}"/>
                </GroupBox.Header>
                <GroupBox.Content>
                    <Grid x:Name="GridMain">
                        <Grid.RowDefinitions>
                            <RowDefinition Style="{StaticResource AutoHeightRowDefinition}"/>
                            <RowDefinition Style="{StaticResource MinHeightRowDefinition}"/>
                            <RowDefinition Style="{StaticResource AutoHeightRowDefinition}"/>
                            <RowDefinition Style="{StaticResource MinHeightRowDefinition}"/>
                            <RowDefinition Style="{StaticResource AutoHeightRowDefinition}"/>
                            <RowDefinition Style="{StaticResource MinHeightRowDefinition}"/>
                            <RowDefinition Style="{StaticResource MaxHeightRowDefinition}"/>
                            <RowDefinition Style="{StaticResource MinHeightRowDefinition}"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Style="{StaticResource MinWidthColumnDefinition}"/>
                            <ColumnDefinition Style="{StaticResource MaxWidthColumnDefinition}"/>
                            <ColumnDefinition Style="{StaticResource MinWidthColumnDefinition}"/>
                        </Grid.ColumnDefinitions>
                        <Grid Grid.Column="1" x:Name="GridSelectCustomer">
                            <Grid.RowDefinitions>
                                <RowDefinition Style="{StaticResource MinHeightRowDefinition}"/>
                                <RowDefinition Style="{StaticResource AutoHeightRowDefinition}"/>
                                <RowDefinition Style="{StaticResource MinHeightRowDefinition}"/>
                                <RowDefinition Style="{StaticResource AutoHeightRowDefinition}"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Style="{StaticResource AutoWidthColumnDefinition}"/>
                                <ColumnDefinition Style="{StaticResource MinWidthColumnDefinition}"/>
                                <ColumnDefinition Style="{StaticResource AutoWidthColumnDefinition}"/>
                                <ColumnDefinition Style="{StaticResource MinWidthColumnDefinition}"/>
                                <ColumnDefinition Style="{StaticResource AutoWidthColumnDefinition}"/>
                                <ColumnDefinition Style="{StaticResource MinWidthColumnDefinition}"/>
                                <ColumnDefinition Style="{StaticResource AutoWidthColumnDefinition}"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Row="1" Text="Select Customer" Style="{StaticResource TextBlockWhite}"/>
                            <ComboBox Grid.Row="1" Grid.Column="2" Width="150"  ItemsSource="{Binding Customers}" 
                          DisplayMemberPath="FirstName" SelectedValue="{Binding SelectedCustomer}"/>
                            <Button Grid.Row="1"  Grid.Column="4" Content="Quick Search"/>
                            <Button Grid.Row="1" Grid.Column="6" Content="Add New Customer"/>

                            <TextBlock Grid.Row="3" Text="Reference No" Style="{StaticResource TextBlockWhite}"/>
                            <TextBox Grid.Row="3"  Grid.Column="2"/>
                            <TextBlock Grid.Row="3"  Text="Case No" Grid.Column="4" Style="{StaticResource TextBlockWhite}"/>
                            <TextBox Grid.Row="3"  Grid.Column="6" Style="{StaticResource TextBoxReadOnly}"/>
                        </Grid>
                        <GroupBox Grid.Row="2" Grid.Column="1" x:Name="GroupBoxCustomerInfo">
                            <GroupBox.Header>
                                <TextBlock Text="Customer Details" Style="{StaticResource TextBlockWhite}"></TextBlock>
                            </GroupBox.Header>
                            <GroupBox.Content>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Style="{StaticResource MinWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource AutoWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource MinWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource AutoWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource MinWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource AutoWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource MinWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource AutoWidthColumnDefinition}"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Style="{StaticResource AutoHeightRowDefinition}"/>
                                        <RowDefinition Style="{StaticResource MinHeightRowDefinition}"/>
                                        <RowDefinition Style="{StaticResource AutoHeightRowDefinition}"/>
                                        <RowDefinition Style="{StaticResource MinHeightRowDefinition}"/>
                                        <RowDefinition Style="{StaticResource AutoHeightRowDefinition}"/>
                                    </Grid.RowDefinitions>
                                    <TextBlock Style="{StaticResource TextBlockWhite}" Grid.Row="0" Grid.Column="1" Text="Name"/>
                                    <TextBox Style="{StaticResource TextBoxReadOnly}" Grid.Column="3"></TextBox>
                                    <TextBlock Style="{StaticResource TextBlockWhite}" Grid.Row="0" Grid.Column="5" Text="Phone No"/>
                                    <TextBox Style="{StaticResource TextBoxReadOnly}" Grid.Column="7"></TextBox>
                                    <TextBlock Style="{StaticResource TextBlockWhite}" Grid.Row="2" Grid.Column="1" Text="Father's Name"/>
                                    <TextBox Style="{StaticResource TextBoxReadOnly}"  Grid.Column="3" Grid.Row="2"></TextBox>
                                    <TextBlock Style="{StaticResource TextBlockWhite}" Grid.Row="4" Grid.Column="1"  Text="Address"/>
                                    <TextBox Style="{StaticResource TextBoxMultiLineReadOnly}" Grid.Row="4" Grid.Column="3"  ></TextBox>
                                    <TextBlock Style="{StaticResource TextBlockWhite}" Grid.Row="2" Grid.Column="5"  Text="Date Of Birth"/>
                                    <TextBox Style="{StaticResource TextBoxReadOnly}" Grid.Column="7" Grid.Row="2"></TextBox>

                                </Grid>
                            </GroupBox.Content>
                        </GroupBox>
                        <GroupBox Grid.Row="4" Grid.Column="1" x:Name="GroupBoxCaseType">
                            <GroupBox.Header>
                                <TextBlock Text="Case Type" Style="{StaticResource TextBlockWhite}"/>
                            </GroupBox.Header>
                            <GroupBox.Content>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Style="{StaticResource MinWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource AutoWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource MaxWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource AutoWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource MaxWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource AutoWidthColumnDefinition}"/>
                                        <ColumnDefinition Style="{StaticResource MinWidthColumnDefinition}"/>
                                    </Grid.ColumnDefinitions>
                                    <RadioButton Grid.Column="1" x:Name="rdbMonthlyInterest"  Content="Monthly Interest" 
                                     Style="{StaticResource RadioButtonWhite}" IsChecked="{Binding IsMonthlyInterestChecked}"/>
                                    <RadioButton Grid.Column="3" x:Name="rdbDailyInstallment" Content="Daily Installment" 
                                     Style="{StaticResource RadioButtonWhite}" IsChecked="{Binding IsDailyInstallmentChecked}"/>
                                    <RadioButton Grid.Column="5" x:Name="rdbMonthlyInstallment" Content="Monthly Installment" 
                                     Style="{StaticResource RadioButtonWhite}" IsChecked="{Binding IsMonthlyInstallmentChecked}"/>
                                </Grid>
                            </GroupBox.Content>
                        </GroupBox>
                        <GroupBox Grid.Row="6" Grid.Column="1" Visibility="{Binding Path=IsMonthlyInterestChecked, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource  VisibilityConverter}}" >
                            <GroupBox.Header>
                                <TextBlock Style="{StaticResource TextBlockWhite}">Monthly Interest</TextBlock>
                            </GroupBox.Header>
                        </GroupBox>
                        <GroupBox Grid.Row="6" Grid.Column="1" Visibility="{Binding Path=IsDailyInstallmentChecked, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource  VisibilityConverter}}" >
                            <GroupBox.Header>
                                <TextBlock Style="{StaticResource TextBlockWhite}">Daily Installment</TextBlock>
                            </GroupBox.Header>
                        </GroupBox>
                        <GroupBox Grid.Row="6" Grid.Column="1" Visibility="{Binding  Path=InMonthlyInstallmentChecked, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource  VisibilityConverter}}" >
                            <GroupBox.Header>
                                <TextBlock Style="{StaticResource TextBlockWhite}">Monthly Installment</TextBlock>
                            </GroupBox.Header>
                        </GroupBox>
                    </Grid>
                </GroupBox.Content>
            </GroupBox>
        </Grid>
    </baseControls:MaintainTemplate.TabSection>
</baseControls:MaintainTemplate>

Here is the code for the converter

    namespace Finance.MainUI.Common.Converters
    {
    public class BoolToVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool) value ? Visibility.Visible : Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter,CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Answer 1

Change the Visibility binding to:

<GroupBox Grid.Row="7" Grid.Column="1" 
    Visibility="{Binding 
        RelativeSource={RelativeSource FindAncestor, 
            AncestorType={x:Type UserControl}}
        Path=DataContext.IsMonthlyInterestChecked, 
        UpdateSourceTrigger=PropertyChanged, 
        Converter={StaticResource  VisibilityConverter}}" >

Then add a property IsMonthlyInterestChecked to your ViewModel and bind RadioButton to it:

<RadioButton Grid.Column="0" x:Name="rdbMonthlyInterest"  
    Content="Monthly Interest" 
    Style="{StaticResource RadioButtonWhite}" 
    IsChecked="{Binding IsMonthlyInterestChecked}"/>