Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Q1: Not as far as I know </p> <p>Q2: I would say styles is the way to go and you can certainly make your own class that derives from button and picks the right corner radius based on if it's Left,Middle,Right. </p> <p>Q3: Should be doable with a custom value converter and your own style.</p> <p>In conlusion. In this case I might have been tempted to put the background gradient and corner radius on the surrounding stackpanel. The buttons would be transparent with the text. Then you wouldn't have to deal with corner radius on individual buttons.</p> <p><em>Edit: Added code &amp; style for Q3 answer above. To OP; I am not sure this is exactly what you were after but perhaps there's something here that can interest you.</em></p> <p>The way I interpreted you was that you wanted to set the button background to a certain color but it should be rendered as a linear gradient based on that color. Other posters mentioned opacity masks and that's not a bad idea at all. I thought I show how to do it using custom value converters.</p> <p>The idea is that I create a custom value converted that converts a solid color brush to a linear gradient brush. Then I use this converter to convert the button background color from solid color brush to a linear gradient brush. </p> <p>Here is the custom value converter:</p> <pre><code>class SolidColorBrushToGradientConverter : IValueConverter { const float DefaultLowColorScale = 0.95F; public object Convert (object value, Type targetType, object parameter, CultureInfo culture) { var solidColorBrush = value as SolidColorBrush; if (!targetType.IsAssignableFrom (typeof (LinearGradientBrush)) || solidColorBrush == null) { return Binding.DoNothing; } var lowColorScale = ParseParameterAsDouble (parameter); var highColor = solidColorBrush.Color; var lowColor = Color.Multiply (highColor, lowColorScale); lowColor.A = highColor.A; return new LinearGradientBrush ( highColor, lowColor, new Point (0, 0), new Point (0, 1) ); } static float ParseParameterAsDouble (object parameter) { if (parameter is float) { return (float)parameter; } else if (parameter is string) { float result; return float.TryParse( (string) parameter, NumberStyles.Float, CultureInfo.InvariantCulture, out result ) ? result : DefaultLowColorScale ; } else { return DefaultLowColorScale; } } public object ConvertBack (object value, Type targetType, object parameter, CultureInfo culture) { return Binding.DoNothing; } } </code></pre> <p>Then I reference this in the style I copied from you (basically the same but I restructured it a bit), the important row part is this:</p> <pre><code>Background="{Binding Path=Background,Mode=OneWay,RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource SolidColorBrushToGradientConverter}, ConverterParameter=0.95}" </code></pre> <p>This means that we bind to the templated parent background (ie Button.Background), we use the converter SolidColorBrushToGradientConverter with the parameter 0.95 (this determines how much darker the "low" color should be compared to the "high" color).</p> <p>The complete style:</p> <pre><code>&lt;local:SolidColorBrushToGradientConverter x:Key="SolidColorBrushToGradientConverter" /&gt; &lt;Style x:Key="GoogleMiddleButton" TargetType="{x:Type Button}"&gt; &lt;Setter Property="Background" Value="#F5F5F5" /&gt; &lt;Setter Property="Foreground" Value="#666666"/&gt; &lt;Setter Property="FontFamily" Value="Arial"/&gt; &lt;Setter Property="FontSize" Value="13"/&gt; &lt;Setter Property="FontWeight" Value="Bold"/&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="Button"&gt; &lt;Border Name="dropShadowBorder" BorderThickness="0,0,0,1" CornerRadius="1" &gt; &lt;Border.BorderBrush&gt; &lt;SolidColorBrush Color="#00000000"/&gt; &lt;/Border.BorderBrush&gt; &lt;Border Name="border" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" CornerRadius="0" Background="{Binding Path=Background,Mode=OneWay,RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource SolidColorBrushToGradientConverter}, ConverterParameter=0.95}" &gt; &lt;Border.BorderBrush&gt; &lt;SolidColorBrush Color="#D8D8D8"/&gt; &lt;/Border.BorderBrush&gt; &lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /&gt; &lt;/Border&gt; &lt;/Border&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="IsMouseOver" Value="True"&gt; &lt;Setter Property="BorderBrush" TargetName="border"&gt; &lt;Setter.Value&gt; &lt;SolidColorBrush Color="#939393"/&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Setter Property="BorderBrush" TargetName="dropShadowBorder"&gt; &lt;Setter.Value&gt; &lt;SolidColorBrush Color="#EBEBEB"/&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsPressed" Value="True"&gt; &lt;Setter Property="Background" Value="#4A8FF7" /&gt; &lt;Setter Property="Foreground" Value="#F5F5F5" /&gt; &lt;Setter Property="BorderBrush" TargetName="border"&gt; &lt;Setter.Value&gt; &lt;SolidColorBrush Color="#5185D8"/&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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