Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can use a second converter to bind the style.</p> <p>Create a IMultiValueConverter that takes two values, ActualWidth and the element that the calculations will be based on (in my example, I am using Window):</p> <pre><code>class ImageButtonStyleSelectorConverter : IMultiValueConverter { #region IMultiValueConverter Members public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { Double actualWidth = values[0] as Double? ?? 0; FrameworkElement element = values[1] as FrameworkElement; if (element != null) { // perform calculations and return button size (using even/odd for illustration purposes) if (element.Width % 2 == 0) { return element.Resources["MultiResButton_Small"]; } else { return element.Resources["MultiResButton_Big"]; } } return Binding.DoNothing; } public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) { throw new NotImplementedException(); } #endregion } </code></pre> <p>Then, change your button to use the converter to choose the style:</p> <pre><code> &lt;Button&gt; &lt;Button.Style&gt; &lt;MultiBinding Converter="{StaticResource ImageButtonStyleSelectorConverter}" FallbackValue="{StaticResource MultiResButton_Big}"&gt; &lt;Binding RelativeSource="{RelativeSource AncestorType=Window, Mode=FindAncestor}" Path="ActualWidth"/&gt; &lt;Binding RelativeSource="{RelativeSource AncestorType=Window, Mode=FindAncestor}" Path="."/&gt; &lt;/MultiBinding&gt; &lt;/Button.Style&gt; &lt;StackPanel&gt; &lt;Image Tag="Multi.png" /&gt; &lt;TextBlock Text="Button Text" /&gt; &lt;/StackPanel&gt; &lt;/Button&gt; </code></pre> <p>I added the FallbackValue because otherwise, I could not see either style from design view.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload