I have a simple WPF (4.0) sample that aims the demonstrate the strangeness I am facing in another project. The sample tries to display a few rectangle shapes for which I use Border elements. Below is the markup:
<Window x:Class="WpfApplication1.Window3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window3" Height="1000" Width="1500">
<Window.Resources>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="grad">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style TargetType="Border">
<Setter Property="Background" Value="{StaticResource grad}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="BorderThickness" Value="1" />
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal">
<Border />
<Border />
<Border />
</StackPanel>
</Window>
In the designer this looks exactly how I imagine it: 3 squares next to each other on the top left of the screen. However at runtime only 1 is displayed and the rest of the window is black. Seemingly the window's content itself is affected by the layout properties. If I use Rectangles instead of Borders the sample works just fine. Can anyone explain please why I am seeing this behaviour (inheritance related maybe)? Also is the difference between design-time view and run-time view basically a VS bug?
Change it like this:
<Style TargetType="Border" x:Key="myborder">
<Setter Property="Background" Value="{StaticResource grad}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="BorderThickness" Value="1" />
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal">
<Border Style = {StaticResources myborder}/>
<Border Style = {StaticResources myborder}/>
<Border Style = {StaticResources myborder}/>
</StackPanel>
Now its OK.
EDIT:
Each Winwow's template is a Border that has a AdornerDecorator in it. And in that decorator there is a ContentPresenter. So when you create a default style for borders it affect the Window's border too.
Related
WPF Toolkit library has Autocompletebox control.
1. How to place an icon at the left of its Textbox part?
2. How to add shadow to the borders of the suggestions popup?
Changing TextBoxStyle property does not give any results.
<!-- xmlns:extendedControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit" -->
<extendedControls:AutoCompleteBox>
<extendedControls:AutoCompleteBox.TextBoxStyle>
<Style TargetType="TextBox">
<Setter Property="Padding" Value="20,0,0,0" />
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/img.png" Stretch="None" AlignmentX="Left" />
</Setter.Value>
</Setter>
</Style>
</extendedControls:AutoCompleteBox.TextBoxStyle>
</extendedControls:AutoCompleteBox>
The Autocompletebox have got a property : TextBoxStyle where you can chose the style of the textbox.
Or you can do that in the property Style like that :
<UserControl.Resources>
<Style TargetType="TextBox" x:Key="TextboxStyle2">
<Setter Property="MaxLength" Value="74" />
<Setter Property="Width" Value="300" />
</Style>
<Style TargetType="controls:AutoCompleteBox" x:Key="TextBoxStyle">
<Setter Property="TextBoxStyle" Value="{StaticResource TextboxStyle2}" />
<Setter Property="IsTextCompletionEnabled" Value="True" />
</Style>
</UserControl.Resources>
/*...*/
<controls:AutoCompleteBox Name="Titre" Style="{StaticResource TextBoxStyle}"/>
But i don't know how to add the shadow. Try the others properties. =)
Edit :
To change background, there is already some tutoriels.
how to separate the background image in wpf textbox?
Exemple :
<Style TargetType="TextBox" x:Key="TextboxStyle2">
<Setter Property="MaxLength" Value="74" />
<Setter Property="Width" Value="300" />
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="../../../Ressources/Icones/Find_5650.ico" Stretch="None" AlignmentX="Left" AlignmentY="Top" />
</Setter.Value>
</Setter>
</Style>
I'm working on a WPF app, and trying to give a button an icon from Icons ResourceDictionary
I created a new ResourceDictionary Merge the Icons ResourceDictionary, and created a few Button Rectangle Styles to use.
And then I found out I can't directly bind the Icon to VisualBrush, I have to create another VisualBrush ResourceKey to show the icon.
I listed working and not working code below.
Anybody know the explanation of this? Any help is appreciated. Thanks a lot.
Binding xaml:
<Button Width="80" Height="80">
<Rectangle Style="{DynamicResource Icon14040}"></Rectangle>
</Button>
Not Working Style:
<Style x:Key="Icon14040" TargetType="{x:Type Rectangle}">
<Setter Property="Height" Value="40" />
<Setter Property="Width" Value="40" />
<Setter Property="Fill">
<Setter.Value>
<VisualBrush Visual="{StaticResource Icon1}"></VisualBrush>
</Setter.Value>
</Setter>
</Style>
Working Style:
<VisualBrush x:Key="Icon1Brush4040" Visual="{StaticResource Icon1}" />
<Style x:Key="Icon14040" TargetType="{x:Type Rectangle}">
<Setter Property="Height" Value="40" />
<Setter Property="Width" Value="40" />
<Setter Property="Fill">
<Setter.Value>
<StaticResource ResourceKey="Icon1Brush4040" />
</Setter.Value>
</Setter>
</Style>
I want to bind the gradient property to the button. I am using below code. I am able to bind the style. Can you suggest how should i bind the linergradientbrush property??
<Window.Resources>
<ResourceDictionary>
<LinearGradientBrush x:Key="buttonStyleGradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FFACC3F5" Offset="1" />
</LinearGradientBrush>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="Vrinda"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Padding" Value="8,4" />
<Setter Property="Margin" Value="0" />
</Style>
</ResourceDictionary>
</Window.Resources><Button Style="{StaticResource buttonStyle}" >
<Label>Home</Label>
</Button>
Just add the buttonStyleGradient to the buttonStyle as a Background Property:
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="Vrinda"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Padding" Value="8,4" />
<Setter Property="Margin" Value="0" />
<Setter Property="Background" Value="{StaticResource buttonStyleGradient}" />
</Style>
And if you don't want to add it to the style, you can manually put in on the button like this:
<Button Style="{StaticResource buttonStyle}" Background="{StaticResource buttonStyleGradient}" >
You need a property to apply the gradient to, try Background:
<Setter Property="Background" Value="{StaticResource buttonStyleGradient}"/>
I have few buttons as Menu in my WPF App.
This scenario is something like menu in a website.
When I click one of the button, I want that button style to be different from others, and when I select another, the previous one should be normal and a selectedstyle should apply on this selected button.
Can you tell me how can I achieve this through ControlTemplate or do I have to maintain a IsSelected property that let us know which button is selected?
Thanks,
VJ
You can try with the RadionButton. The below sample will create a Flat button look for the RadioButton.
<Window x:Class="WpfApplication8.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="472">
<Window.Resources>
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Focusable"
Value="False" />
<Setter Property="GroupName"
Value="filter" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="HorizontalAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<ControlTemplate.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="HorizontalAlignment"
Value="Center" />
</Style>
</ControlTemplate.Resources>
<Border x:Name="PART_border"
CornerRadius="2"
Margin="2"
Background="Transparent"
BorderThickness="1"
BorderBrush="{x:Static SystemColors.ControlDarkBrush}"
SnapsToDevicePixels="True">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter x:Name="PART_content" />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="True">
<Setter TargetName="PART_content"
Property="TextBlock.FontWeight"
Value="Bold" />
<Setter TargetName="PART_border"
Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Color="white"
Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel Orientation="Horizontal" >
<RadioButton Height="30" Width="100" Content="First"></RadioButton>
<RadioButton Height="30"
Width="100"
Content="Second"></RadioButton>
<RadioButton Height="30"
Width="100"
Content="First"></RadioButton>
</StackPanel>
</Grid>
for RadioButton with Image just have look at Matt's blog
http://madprops.org/blog/wpf-killed-the-radiobutton-star/
You should use the built in visual state handling and create the states / styles in XAML.
In your concrete case it seems that what you're after is a group of RadioButtons, so that you don't have to write any code to deal with switching between states.
You better Use a Custom RadioButton List for this purpose.Check out the below post.
Do not allow unselect/deselect in ListBox
You can easily customize the selected and deselected styles to match your requirement
I am having some issues with applying a gradient to a RadButton.
I have a gradient definition in my styles resource dictionairy like so :
<LinearGradientBrush x:Key="GridView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5B5B5B" Offset="1"/>
<GradientStop Color="#FF868686"/>
<GradientStop Color="#FF4F4F4F" Offset="0.42"/>
<GradientStop Color="#FF0E0E0E" Offset="0.43"/>
</LinearGradientBrush>
When i apply this gradient directly to the background of a RadButton everything works.
Here is the button and the template definition:
Button
<telerik:RadButton Margin="5,10,5,0" Click="RadButton_Click" Tag="30" Content="30 Days" Style="{StaticResource SliderButton}" Background="{StaticResource GridView_HeaderBackground}" />
Template:
<!-- Style Template for Slider RadButton -->
<Style x:Key="SliderButton" TargetType="telerik:RadButton">
<Setter Property="Height" Value="30" />
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="5,2" />
</Style>
However when applying this gradient in the resource dictionary, my application will not load it simply gets to the silverlight loading screen and then never proceeds
Here is the button and template which breaks my app.
Button:
<telerik:RadButton Margin="5,10,5,0" Click="RadButton_Click" Tag="30" Content="30 Days" Style="{StaticResource SliderButton}" />
Template:
<!-- Style Template for Slider RadButton -->
<Style x:Key="SliderButton" TargetType="telerik:RadButton">
<Setter Property="Background" Value="{StaticResource GridView_HeaderBackground}" />
<Setter Property="Height" Value="30" />
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="5,2" />
</Style>
When i observe the js error console in google chrome i notice the following error is produced:
"Cannot find a resource with the
name/key ResourceWrapper"
The "GridView_HeaderBackground" needs to be defined before "SliderButton". If they are in the same Xaml then that is determined by document order.