WPF: Can i set the width of an element by percentages?

Question

Say I have 2 buttons in an Element and I want to set the 2 elements to always fill up 1/2 width of its containing element each, can i do that?

UPDATE

why cant i do something like

<StackPanel Orientation="Horizontal" Grid.Row="0">
    <Button Content="Click me" Command="{Binding ClickCommand}" Width="1*" />
    <Button Content="Exit" Command="{Binding CloseCommand}" Width="1*" />
</StackPanel>

why doesnt the 1* work in this context? i get the error

Cannot convert "1*"

It doesn't work because you're using a StackPanel. Star-sizing only works with Grid. — ASanch, Sep 26 '10 at 04:24
oh and in particular, star-sizing can only be done on either the ColumnDefinition.Width property, or the RowDefinition.Height property. It cannot be set on the child controls (like what you did above with the Button's Width property). — ASanch, Sep 26 '10 at 04:26

score 60 · Accepted Answer · edited Jan 23 '16 at 10:23

You can use a Grid with two columns for this.

<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*"/>
    <ColumnDefinition Width="1*"/>
  </Grid.ColumnDefinitions>

  <Button Grid.Column="0">Button1</Button>
  <Button Grid.Column="1">Button2</Button>
</Grid>

Notice the use of star(*) in the ColumnDefinition.Width property. This means that both columns will take up the same amount of space. So in the example above, each button will each occupy 1/2 of the available space of the containing Grid. So if you make one Width to be equal to 2*, that column will take up twice the amount of space as the other column. Hope this makes sense.

score 2 · Answer 2 · answered Aug 08 '13 at 02:03

I created a ContentControl that allows me wrap content to add a dynamic percentage width/height.

/// <summary>
/// This control has a dynamic/percentage width/height
/// </summary>
public class FluentPanel : ContentControl, IValueConverter
{
    #region Dependencie Properties

    public static readonly DependencyProperty WidthPercentageProperty =
        DependencyProperty.Register("WidthPercentage", typeof(int), typeof(FluentPanel), new PropertyMetadata(-1, WidthPercentagePropertyChangedCallback));

    private static void WidthPercentagePropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
    {
        ((FluentPanel)dependencyObject).OnWidthPercentageChange();
    }

    public int WidthPercentage
    {
        get { return (int)GetValue(WidthPercentageProperty); }
        set { SetValue(WidthPercentageProperty, value); }
    }

    public static readonly DependencyProperty HeightPercentageProperty =
        DependencyProperty.Register("HeightPercentage", typeof(int), typeof(FluentPanel), new PropertyMetadata(-1, HeightPercentagePropertyChangedCallback));

    private static void HeightPercentagePropertyChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
    {
        ((FluentPanel)dependencyObject).OnHeightPercentageChanged();
    }

    public int HeightPercentage
    {
        get { return (int)GetValue(HeightPercentageProperty); }
        set { SetValue(HeightPercentageProperty, value); }
    }

    #endregion

    #region Methods

    private void OnWidthPercentageChange()
    {
        if (WidthPercentage == -1)
        {
            ClearValue(WidthProperty);
        }
        else
        {
            SetBinding(WidthProperty, new Binding("ActualWidth") { Source = Parent, Converter = this, ConverterParameter = true });
        }
    }

    private void OnHeightPercentageChanged()
    {
        if (HeightPercentage == -1)
        {
            ClearValue(HeightProperty);
        }
        else
        {
            SetBinding(HeightProperty, new Binding("ActualHeight") { Source = Parent, Converter = this, ConverterParameter = false });
        }
    }

    #endregion

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ((bool)parameter)
        {
            // width
            return (double)value * (WidthPercentage * .01);
        }
        else
        {
            // height
            return (double)value * (HeightPercentage * .01);
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

WPF: Can i set the width of an element by percentages?

2 Answers2