Binding height to UserControl using converter

Question

Binding height to UserControl using converter

BitSmithy 2,206

Hello I try to bing height to user control using converter:

Height="{Binding Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource HeightConventer}}"

I found in net that I must do something like that:

    <UserControl.Height>
        <x:Double {Binding Height}></x:Double>
    </UserControl.Height>

But I cant find right syntax. Please tell me how to write right XAML.

Anonymous

2023-10-11T02:51:20.6933333+00:00
I can't understand you very well. If you want to bind UserControl's height to a value, you don't need to write syntax like that. you just need the following code:

<local:TestControl Height="{Binding TestHeight,Mode=OneWay,Converter={StaticResource TestConvertor}}" Width="200" />
BitSmithy 2,206 Reputation points

2023-10-17T12:14:08.0366667+00:00

Where to put your answer in UserControl XAML

<UserControl

.............

........

</UserControl>
Anonymous

2023-10-18T02:43:05.8033333+00:00

@BitSmithy Could you please be more specific about what you are trying to do? It will be better if you could share the code snippet that you are trying implement.
BitSmithy 2,206 Reputation points

2023-10-18T14:50:45.98+00:00

If you are binding to UserControl without converter it works, example:

<UserControl

......

Height="{Binding Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged"

<UserControl>

but when you want to set binding to UserControl with converter it doesnt work, example:.

<UserControl

......

Height="{Binding Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource XKHeightConventer}}"

<UserControl.Rsources>

.....

<local:HeightConventer x:Key="XKHeightConventer"/>

</UserControl.Rsources>

<UserControl>

I found in net, that it is known issue. I need walkthrought
Anonymous

2023-10-23T05:58:23.78+00:00

Do you mean you want to bind the property to the property itself inside the UserControl?
BitSmithy 2,206 Reputation points

2023-10-23T09:22:31.1933333+00:00

I want to bind it to an object set to DataContext.

I want to bind UserControl.Width to an object set to its DataContext (for example Rectangle), but binding must be set with converter.
Anonymous

2023-10-24T06:08:11.59+00:00

Could you please share a complete UserControl include the XAML and code-behind here? That will be helpful to find out a solution for this question.

BitSmithy 2,206

UserControl XAML

<UserControl
    x:Class="AddorneyLayer_Test_Binding.UCTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AddorneyLayer_Test_Binding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
    
    Height="{Binding Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource XKHeightConventer}}"
    >
    <UserControl.Resources>
        <local:HeightConventer x:Key="XKHeightConventer"/>
    </UserControl.Resources>
    
    <Grid Background="Beige">
    </Grid>
</UserControl>

UserControl code behind

using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Shapes;

namespace AddorneyLayer_Test_Binding
{
    public sealed partial class UCTest : UserControl
    {
        public UCTest()
        {
            this.InitializeComponent();
        }
    }

    public class HeightConventer : IValueConverter
    {
        public object Convert(object value, Type targetType,
            object parameter, string language)
        {
            if (value is double d)
                if (d < 6)
                    return 6;
                else
                    return value;
            else
                return 6;
        }
        public object ConvertBack(object value, Type targetType,
            object parameter, string language)
        {
                return value;
        }
    }//end Converter

}

Use the UserControl in app code

Rectangle r = new Rectangle();             
r.Width = 100;             
r.Height = 100;            
UCTest uct = new UCTest();
uct.DataContext = r;

Try to run the app and you get the exception.

BitSmithy 2,206

UserControl XAML

<UserControl
    x:Class="AddorneyLayer_Test_Binding.UCTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AddorneyLayer_Test_Binding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
    
    Height="{Binding Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource XKHeightConventer}}"
    >
    <UserControl.Resources>
        <local:HeightConventer x:Key="XKHeightConventer"/>
    </UserControl.Resources>
    
    <Grid Background="Beige">
    </Grid>
</UserControl>

UserControl code behind

namespace AddorneyLayer_Test_Binding
{
    public sealed partial class UCTest : UserControl
    {
        public UCTest()
        {
            this.InitializeComponent();
        }
    }

    public class HeightConventer : IValueConverter
    {
        public object Convert(object value, Type targetType,
            object parameter, string language)
        {
            if (value is double d)
                if (d < 6)
                    return 6;
                else
                    return value;
            else
                return 6;
        }
        public object ConvertBack(object value, Type targetType,
            object parameter, string language)
        {
                return value;
        }
    }//end Converter
}

App (MainWindow) code

            Rectangle r = new Rectangle();
            r.Width = 100;
            r.Height = 100;
            
			UCTest uct = new UCTest();
            uct.DataContext = r;

Now try to run the app. You will see the exception.

Viorel 122.6K

Try this control:

<UserControl . . . >
    
    <UserControl.Resources>
        <local:HeightConventer x:Key="XKHeightConventer"/>
    </UserControl.Resources>
    
    <UserControl.Height>
        <Binding Path="Height" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged" Converter="{StaticResource XKHeightConventer}"/>
    </UserControl.Height>
    
    <Grid Background="Beige">
    </Grid>

</UserControl>

BitSmithy 2,206 Reputation points

2023-11-07T12:50:38.5633333+00:00

It looks to work but you must put it after

<UserControl.Resources></UserControl.Resources>

otherwise it throws exception

Put this as answer

Your answer

Anonymous

2023-10-11T02:51:20.6933333+00:00

I can't understand you very well. If you want to bind UserControl's height to a value, you don't need to write syntax like that. you just need the following code:

<local:TestControl Height="{Binding TestHeight,Mode=OneWay,Converter={StaticResource TestConvertor}}" Width="200" />
BitSmithy 2,206 Reputation points

2023-10-17T12:14:08.0366667+00:00

Where to put your answer in UserControl XAML

<UserControl

.............

........

</UserControl>
Anonymous

2023-10-18T02:43:05.8033333+00:00

@BitSmithy Could you please be more specific about what you are trying to do? It will be better if you could share the code snippet that you are trying implement.
BitSmithy 2,206 Reputation points

2023-10-18T14:50:45.98+00:00

If you are binding to UserControl without converter it works, example:

<UserControl

......

Height="{Binding Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged"

<UserControl>

but when you want to set binding to UserControl with converter it doesnt work, example:.

<UserControl

......

Height="{Binding Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource XKHeightConventer}}"

<UserControl.Rsources>

.....

<local:HeightConventer x:Key="XKHeightConventer"/>

</UserControl.Rsources>

<UserControl>

I found in net, that it is known issue. I need walkthrought
Anonymous

2023-10-23T05:58:23.78+00:00

Do you mean you want to bind the property to the property itself inside the UserControl?
BitSmithy 2,206 Reputation points

2023-10-23T09:22:31.1933333+00:00

I want to bind it to an object set to DataContext.

I want to bind UserControl.Width to an object set to its DataContext (for example Rectangle), but binding must be set with converter.
Anonymous

2023-10-24T06:08:11.59+00:00

Could you please share a complete UserControl include the XAML and code-behind here? That will be helpful to find out a solution for this question.
BitSmithy 2,206 Reputation points

2023-10-30T13:51:46.14+00:00

UserControl XAML

<UserControl x:Class="AddorneyLayer_Test_Binding.UCTest" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:AddorneyLayer_Test_Binding" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" Height="{Binding Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource XKHeightConventer}}" > <UserControl.Resources> <local:HeightConventer x:Key="XKHeightConventer"/> </UserControl.Resources> <Grid Background="Beige"> </Grid> </UserControl>

UserControl code behind

using System; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Shapes; namespace AddorneyLayer_Test_Binding { public sealed partial class UCTest : UserControl { public UCTest() { this.InitializeComponent(); } } public class HeightConventer : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { if (value is double d) if (d < 6) return 6; else return value; else return 6; } public object ConvertBack(object value, Type targetType, object parameter, string language) { return value; } }//end Converter }

Use the UserControl in app code

Rectangle r = new Rectangle(); r.Width = 100; r.Height = 100; UCTest uct = new UCTest(); uct.DataContext = r;

Try to run the app and you get the exception.
BitSmithy 2,206 Reputation points

2023-10-30T13:59:04.19+00:00

UserControl XAML

<UserControl x:Class="AddorneyLayer_Test_Binding.UCTest" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:AddorneyLayer_Test_Binding" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" Height="{Binding Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource XKHeightConventer}}" > <UserControl.Resources> <local:HeightConventer x:Key="XKHeightConventer"/> </UserControl.Resources> <Grid Background="Beige"> </Grid> </UserControl>

UserControl code behind

namespace AddorneyLayer_Test_Binding { public sealed partial class UCTest : UserControl { public UCTest() { this.InitializeComponent(); } } public class HeightConventer : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { if (value is double d) if (d < 6) return 6; else return value; else return 6; } public object ConvertBack(object value, Type targetType, object parameter, string language) { return value; } }//end Converter }

App (MainWindow) code

Rectangle r = new Rectangle(); r.Width = 100; r.Height = 100; UCTest uct = new UCTest(); uct.DataContext = r;

Now try to run the app. You will see the exception.
Viorel 122.6K Reputation points

2023-10-30T16:31:06.4+00:00

Try this control:

<UserControl . . . > <UserControl.Resources> <local:HeightConventer x:Key="XKHeightConventer"/> </UserControl.Resources> <UserControl.Height> <Binding Path="Height" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged" Converter="{StaticResource XKHeightConventer}"/> </UserControl.Height> <Grid Background="Beige"> </Grid> </UserControl>
BitSmithy 2,206 Reputation points

2023-11-07T12:50:38.5633333+00:00

It looks to work but you must put it after

<UserControl.Resources></UserControl.Resources>

otherwise it throws exception

Put this as answer

Share via

Binding height to UserControl using converter

Your answer