Screen resolution based: Setting button's width and height - wpf

Question

I'm starting to use WPF and I want to make an equivalent assignation just as in c# but I can't find how.
On my C# Windows Forms I usually use:
myButton.Width = (Screen.PrimaryScreen.Bounds.Height * 6) / 100;
myButton.Height = (Screen.PrimaryScreen.Bounds.Height * 6) / 100;
Now in XAML I'm using
<Button x:Name="myButton"/>
And then in my C# file I implement the C# code above.
But of course changes are not shown in the XAML editor
I tried something like:
<Button Width="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Height * 0.06}" />
<Button Width="{Binding Source={x:Static SystemParameters.WorkArea}, Path=(Height * 0.06)}" />
<Button Width="({Binding Source={x:Static SystemParameters.WorkArea}, Path=Height}) * 0.06" />
<Button Width="{{Binding Source={x:Static SystemParameters.WorkArea}, Path=Height * 0.06} * 0.06}" />
etc. but none of it works.
How can I use a variable to set a Button's Width/Height directly from XAML code?

Answer 1

You cannot do calculations in XAML.
Best way is to create an IValueConverter
[EDIT] and maybe pass in the factor as an ConverterParameter
[EDIT2] But maybe this isn't really the way you want to go. Maybe you want a Grid with relative column and row widths/heights and put the button in there and stretch it. This is more the way you work in WPF. Use layout components instead of fixed positioning and sizing

Answer 2

Of course you can set the Width and Height of your button in code-behind via its name, e.g.:
<Button x:Name="myButton"/>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
myButton.Width = (Screen.PrimaryScreen.Bounds.Height * 6) / 100;
myButton.Height = (Screen.PrimaryScreen.Bounds.Height * 6) / 100;
}
// ...other code.
}
You cannot do this directly in XAML as these kind of expressions are not supported. However, you can create a custom value converter with a factor as parameter that calculates the value.
public class FactorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (double)value * System.Convert.ToDouble(parameter, CultureInfo.InvariantCulture);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return (double)value / System.Convert.ToDouble(parameter);
}
}
You have to create a converter instance in a resource dictionary in XAML, e.g. the Window resources.
<Window ...>
<Window.Resources>
<local:FactorConverter x:Key="FactorConverter"/>
</Window.Resources>
<!-- ...other markup. -->
</Window>
You need a Binding instead of the Static markup extension to use the converter.
<Button x:Name="myButton"
Width="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Height, Converter={StaticResource FactorConverter}, ConverterParameter='0.06'}"
Height="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Height, Converter={StaticResource FactorConverter}, ConverterParameter='0.06'}"/>
Note that the ConverterParameter is passed as string and then converted to double in the converter. To pass it directly as double you would need to write a custom markup extension or write the binding in a much more verbose way, e.g. for Width:
<Button x:Name="myButton">
<Button.Width>
<Binding Source="{x:Static SystemParameters.WorkArea}"
Path="Height"
Converter="{StaticResource FactorConverter}">
<Binding.ConverterParameter>
<system:Double>0.06</system:Double>
</Binding.ConverterParameter>
</Binding>
</Button.Width>
</Button>
This way, you could just cast parameter to double instead of using Convert.ToDouble.