Bind a Grid Row Height to a Dependency Property of User Control

Question

I think I'm missing something here, and it's probably something simple - but here is my issue.

I have created a WPF UserControl which consists of a multi-row grid, each row containing a button. On this UserControl, I have implemented a number of dependency properties, the intent of which is to control the row height of the corresponding button. By setting the value to true , the intent is that the row shows up (height 70* instead of 0); however, currently the row height is not getting reset to the proper value of 70* . Any idea what I did wrong? I can't figure out how to debug the ValueConverter, as a breakpoint set in it is never hit. Probably the binding logic is incorrect, but I don't know what else to put in it.

public bool ShowCancelButton
{
   get { return (bool)GetValue(ShowCancelButtonProperty); }
   set { SetValue(ShowCancelButtonProperty, value); }
}

// Using a DependencyProperty as the backing store for ShowCancelButton.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty ShowCancelButtonProperty =
   DependencyProperty.Register("ShowCancelButton", typeof(bool), typeof(myClass), new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender));

So, to go from bool to GridLength , I have an IValueConverter :

public class RowVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        //This should return a grid row height value of either 0 (for hidden) or 70* (for visible)
        if (bool.Parse(value.ToString()))
            return new GridLength(70, GridUnitType.Star);

        return 0;
    }

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

And, in the XAML, I'm trying to do the binding:

<RowDefinition Height="{Binding ElementName=ShowCancelButton, Converter={StaticResource RowVisibilityConverter}}"/>

Answer 1

You should be able to do this entirely in xaml, from what I understood you are doing.

Just name the root of your usercontrol and bind with the ElementName of that and the path of your DependencyProperty.

Toggling of the DependencyProperty is then up to you to decide if it is a togglebutton or mouse/keyboard event.

<UserControl x:Name="MyGridControlRoot" x:Class="WpfApplication2.MyGridControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d">

    <UserControl.Resources>
        <Style x:Key="RowStyle" TargetType="{x:Type RowDefinition}">
            <Setter Property="Height" Value="0"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=MyGridControlRoot, Path=ShowCancelButton}" Value="True">
                    <Setter Property="Height" Value="70*"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <StackPanel>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Style="{StaticResource RowStyle}"/>
                <RowDefinition Style="{StaticResource RowStyle}"/>
            </Grid.RowDefinitions>

            <Grid Grid.Row="0">
                <Button/>
            </Grid>
            <Grid Grid.Row="1">
                <Button/>
            </Grid>
        </Grid>

        <ToggleButton x:Name="ToggleHeightButton" IsChecked="{Binding ElementName=MyGridControlRoot, Path=ShowCancelButton}"/>
    </StackPanel>

</UserControl>

Answer 2

Change your Binding as following:

<RowDefinition Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}},Path=ShowCancelButton, Converter={StaticResource RowVisibilityConverter}}"/>

Above expression is on the basis of information you have given, UserControl has DependencyProperty named ShowCancelButton . So you need to do Ancestor Binding If you want to access a Parent's property from Child Elements .

PS: Change UserControl with your actual type of parent Control .