WPF Setting the Width and Height as a Percentage Value

Question

Say I want a TextBlock to have its Width equal to it s Parent container s Width  ie   stretch from side to side  or a percentage of it s Parent Container Width  how can I accomplish this in XAML without specifying absolute values   I want to do this so that if the Parent Container container is later on expanded  its  Width increased   its  Child Elements will also be expanded automatically    basically  like in HTML and CSS

User · Answer

For anybody who is getting an error like    2   string cannot be converted to Length    lt Grid  gt       lt Grid ColumnDefinitions gt           lt ColumnDefinition Width  2     gt  lt  --This will make any control in this column of grid take 2 5 of total width-- gt           lt ColumnDefinition Width  3     gt  lt  --This will make any control in this column of grid take 3 5 of total width-- gt       lt  Grid ColumnDefinitions gt       lt Grid RowDefinitions gt           lt RowDefinition MinHeight  30    gt       lt  Grid RowDefinitions gt        lt TextBlock Grid Column  0  Grid Row  0  gt Your text block a  lt  TextBlock gt       lt TextBlock Grid Column  1  Grid Row  0  gt Your text block b  lt  TextBlock gt   lt  Grid gt

User · Answer

I use two methods for relative sizing  I have a class called Relative with three attached properties To  WidthPercent and HeightPercent which is useful if I want an element to be a relative size of an element anywhere in the visual tree and feels less hacky than the converter approach - although use what works for you  that you re happy with   The other approach is rather more cunning  Add a ViewBox where you want relative sizes inside  then inside that  add a Grid at width 100  Then if you add a TextBlock with width 10 inside that  it is obviously 10  of 100   The ViewBox will scale the Grid according to whatever space it has been given  so if its the only thing on the page  then the Grid will be scaled out full width and effectively  your TextBlock is scaled to 10  of the page   If you don t set a height on the Grid then it will shrink to fit its content  so it ll all be relatively sized  You ll have to ensure that the content doesn t get too tall  i e  starts changing the aspect ratio of the space given to the ViewBox else it will start scaling the height as well  You can probably work around this with a Stretch of UniformToFill

User · Answer

I know it s not XAML  but I did the same thing with SizeChanged event of the textbox  private void TextBlock SizeChanged object sender  SizeChangedEventArgs e       TextBlock textBlock   sender as TextBlock     FrameworkElement element   textBlock Parent as FrameworkElement     textBlock Margin   new Thickness 0  0   element ActualWidth   100    20  0      The textbox appears to be 80  size of its parent  well right side margin is 20   and stretches when needed

User · Answer

You can put the textboxes inside a grid to do percentage values on the rows or columns of the grid and let the textboxes auto-fill to their parent cells  as they will by default   Example    lt Grid gt       lt Grid ColumnDefinitions gt           lt ColumnDefinition Width  2     gt           lt ColumnDefinition Width  3     gt       lt  Grid ColumnDefinitions gt        lt TextBox Grid Column  0    gt       lt TextBox Grid Column  1    gt   lt  Grid gt    This will make  1 2 5 of the width  and  2 3 5

User · Answer

IValueConverter implementation can be used  Converter class which takes inheritance from IValueConverter takes some parameters like value  percentage  and parameter  parent s width  and returns desired width value  In XAML file  component s width is set with the desired value  public class SizePercentageConverter   IValueConverter       public object Convert object value  Type targetType  object parameter  CultureInfo culture                if  parameter    null              return 0 7   value ToDouble             string   split   parameter ToString   Split               double parameterDouble   split 0  ToDouble     split 1  ToDouble      Math Pow 10  split 1  Length            return value ToDouble     parameterDouble             public object ConvertBack object value  Type targetType  object parameter  CultureInfo culture                   Don t need to implement this         return null           XAML   lt UserControl Resources gt       lt m SizePercentageConverter x Key  quot PercentageConverter quot    gt   lt  UserControl Resources gt    lt ScrollViewer VerticalScrollBarVisibility  quot Auto quot            HorizontalScrollBarVisibility  quot Disabled quot            Width  quot  Binding Converter  StaticResource PercentageConverter   RelativeSource  RelativeSource Mode FindAncestor AncestorType  x Type Border   Path ActualWidth  quot            Height  quot  Binding Converter  StaticResource PercentageConverter   ConverterParameter 0 6  RelativeSource  RelativeSource Mode FindAncestor AncestorType  x Type Border   Path ActualHeight  quot  gt        lt  ScrollViewer gt

User · Answer

Typically  you d use a built-in layout control appropriate for your scenario  e g  use a grid as a parent if you want scaling relative to the parent    If you want to do it with an arbitrary parent element  you can create a ValueConverter do it  but it probably won t be quite as clean as you d like   However  if you absolutely need it  you could do something like this  public class PercentageConverter   IValueConverter       public object Convert object value           Type targetType           object parameter           System Globalization CultureInfo culture                return System Convert ToDouble value                    System Convert ToDouble parameter              public object ConvertBack object value           Type targetType           object parameter           System Globalization CultureInfo culture                throw new NotImplementedException             Which can be used like this  to get a child textbox 10  of the width of its parent canvas   lt Window x Class  quot WpfApplication1 Window1 quot      xmlns  quot http   schemas microsoft com winfx 2006 xaml presentation quot      xmlns x  quot http   schemas microsoft com winfx 2006 xaml quot      xmlns local  quot clr-namespace WpfApplication1 quot      Title  quot Window1 quot  Height  quot 300 quot  Width  quot 300 quot  gt       lt Window Resources gt           lt local PercentageConverter x Key  quot PercentageConverter quot   gt       lt  Window Resources gt       lt Canvas x Name  quot canvas quot  gt           lt TextBlock Text  quot Hello quot                     Background  quot Red quot                      Width  quot  Binding                         Converter  StaticResource PercentageConverter                           ElementName canvas                          Path ActualWidth                          ConverterParameter 0 1  quot   gt       lt  Canvas gt   lt  Window gt

User · Answer

The way to stretch it to the same size as the parent container is to use the attribute     lt Textbox HorizontalAlignment  Stretch        That will make the Textbox element stretch horizontally and fill all the parent space horizontally  actually it depends on the parent panel you re using but should work for most cases    Percentages can only be used with grid cell values so another option is to create a grid and put your textbox in one of the cells with the appropriate percentage

[wpf] WPF: Setting the Width (and Height) as a Percentage Value

Examples related to wpf

Examples related to xaml

Examples related to resize