I have a WPF application written in C#.
I have made a button. I changed the background color.
How can I change the bluish color when mouse is over my button? And how to control animation/change time?
http://msdn.microsoft.com/en-us/magazine/cc163421.aspx
You will need to look into creating a 'style' for your button. This will be done in XAML, you will find Microsoft Expression Blend really simplifies the design of most aspects of your WPF projects.
<Style x:Key="StyleButton" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="Tahoma"></Setter>
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Width" Value="100"></Setter>
<Setter Property="Foreground" Value="Blue"></Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="White"></GradientStop>
<GradientStop Offset="1" Color="Lime"></GradientStop>
<GradientStop Offset="2" Color="Yellow"></GradientStop>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="True"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Foreground" Value="Yellow"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="blue" Offset="0"/>
<GradientStop Color="#CC00FF" Offset="1"/>
<GradientStop Color="#FF00CC" Offset="2"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</MultiTrigger>
</Style.Triggers>
</Style>
Related
I would like to change the datagrid's row background from a solid colour to gradient. Any ideas?
The current code is:
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Style.Triggers>
<DataTrigger Binding="{Binding GSRowBackground}" Value="0">
<Setter Property="Background" Value="White"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
The solution (thanks for pointing me in the right direction):
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Style.Triggers>
<DataTrigger Binding="{Binding GSRowBackground}" Value="0">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#888888"/>
<GradientStop Offset="1" Color="#FFFFF86E"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
<LinearGradientBrush x:Key="gradientBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#888888"/>
<GradientStop Offset="1" Color="#FFFFF86E"/>
</LinearGradientBrush>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRow}">
<Border x:Name="DGR_Border" SnapsToDevicePixels="True" Background="{StaticResource gradientBrush}" Padding="0,0,3,3">
<DataGridCellsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The solutions (thanks for pointing me in the right direction):
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Style.Triggers>
<DataTrigger Binding="{Binding GSRowBackground}" Value="0">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#888888"/>
<GradientStop Offset="1" Color="#FFFFF86E"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
How do I change the background of a textbox with gradient fill when it has focus?
I am trying to create style for a TextBox user control that will have a gradient background when the user has gives it focus, here is what I have so far.
<Style TargetType="{x:Type TextBox}" x:Key="TextBoxNormal" >
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<!--<Setter Property="MinWidth" Value="100"/>-->
<Setter Property="Height" Value="25"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="FontFamily" Value="Verdana"/>
<Setter Property="FontSize" Value="12" />
<Setter Property="Padding" Value="3"/>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="true">
<Border x:Name="errorBorder" Background="Red" DockPanel.Dock="right" Margin="5,0,0,0" Width="10" Height="10" CornerRadius="10"
ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center" FontWeight="Bold" FontSize="8" Foreground="white" />
</Border>
<AdornedElementPlaceholder Name="customAdorner" VerticalAlignment="Center" >
<Border BorderBrush="red" BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border x:Name="Border"
BorderThickness="1"
CornerRadius="3"
Padding="0">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#AAAAA1" Offset="0" />
<GradientStop Color="#AAAAA1" Offset=".2" />
</LinearGradientBrush>
</Border.BorderBrush>
<ScrollViewer x:Name="PART_ContentHost" Margin="0">
<ScrollViewer.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#ededed"/>
<GradientStop Offset=".91" Color="White"/>
</LinearGradientBrush>
</ScrollViewer.Background>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="#EEEEEE"/>
<Setter TargetName="Border" Property="BorderBrush" Value="#EEEEEE"/>
<Setter Property="Foreground" Value="#888888"/>
</Trigger>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="Margin" Value="0 0 15 0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Here is a pretty straight forward way of doing it in Xaml, using a LinearGradientBrush to set the TextBox.Background property when TextBox.IsFocused is true.
<TextBox Width="100" Height="20">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
Edit : In your ControlTemplate.Triggers you need to add a trigger that sets the background of your ScrollViewer, try adding the following trigger to your style's ControlTemplate.Triggers.
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="PART_ContentHost" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
This is a link for a question asked before, which concerns a TreeView:
WPF TreeView: How to style selected items with rounded corners like in Explorer
My question is : How to migrate this Solution on a ListView ?
The answers are a little disordered, so I didn't understand what's happening there !
I thought that question sounded familiar. :)
So, you should just be able to use the same code, but then use Visual Studio to Find and Replace TreeView to ListView. Of course there are a few parts like the Image.Source and the IsMouseDirectlyOverItem helper that you may need to alter more carefully. For the most part, the Find and Replace function should work. TreeView and ListView have absolutely loads of identical properties.
Let me know if you have any problems doing this.
You can change your HierarchicalDataTemplate to a normal one like this:
<DataTemplate DataType="{x:Type viewmodels:ObjectBaseViewModel}">
<StackPanel Orientation="Horizontal" Margin="2,1,5,2">
<Grid Margin="0,0,3,0">
<Image Name="icon" Source="/ExplorerTreeView/Images/folder.png"/>
</Grid>
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
Let me know if I have misunderstood your problem.
Well, I make some changes and I think now it works Better:
<ListView ...>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="BorderThickness" Value="1"/>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="helpers:ListViewHelper.IsMouseDirectlyOverItem" Value="False"/>
<Condition Property="IsSelected" Value="False"/>
<Condition Property="IsFocused" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="helpers:ListViewHelper.IsMouseDirectlyOverItem" Value="True"/>
<Condition Property="IsSelected" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF8F8F8" Offset="0"/>
<GradientStop Color="#FFE5E5E5" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#D9D9D9"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFAFBFD" Offset="0"/>
<GradientStop Color="#B8D6FB " Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#D9D9D9"/>
</MultiTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Resources>
<!-- Brushes for the selected item -->
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFAFBFD" Offset="0"/>
<GradientStop Color="#B8D6FB " Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
</ListView.Resources>
</ListView>
The problem I had with the last answer, is that: IF for example the parent control of this ListView is also a ListView (or a TreeView) when you switch clicks from a listView to another, the last selected ListView always stay selected too... I think because it's independant from the other children.
I want to have a MultiDataTrigger for my TabControl. When the tab is hovered it should change the color. But not if the Tab is selected. I tried a MultiDataTrigger. But it does not seem to work. Here is my Style:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" BorderBrush="Black" BorderThickness="0.5,0.5,0.5,0" CornerRadius="4,4,0,0">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#fefeff" Offset="0" />
<GradientStop Color="#e7edf6" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#c5d0df" Offset="0" />
<GradientStop Color="#aab4c2" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsMouseOver}" Value="True" />
<Condition Binding="{Binding Path=IsSelected}" Value="False" />
</MultiDataTrigger.Conditions>
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#dde6f2" Offset="0" />
<GradientStop Color="#c6d0de" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Is there something wrong?
Change your trigger to be:
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="false"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
As per AngelWPF's answer a DataTrigger will attempt to bind to the current DataContext, where it will find nothing matching the properties.
DataTriggers use the DataContext as the source. And I am sure that IsMouseOver and IsSelected are not properties from your data context, they are properties of the tab item.
I suggest use normal MultiTrigger with normal Trigger Conditions in it.
I just want to ask how should I put my image (dynamically) in this following code:
<Style x:Key="ButtonStyler" TargetType="{x:Type Button}">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="black" Offset="0" />
<GradientStop Color="black" Offset="1" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="40" />
<Setter Property="Foreground" Value="white" />
<Setter Property="Grid.Row" Value="2" />
<Setter Property="Grid.Column" Value="3" />
<Setter Property="Content" Value="Forgot your password?" />
<Setter Property="ContentTemplate"
Value="{DynamicResource myContentTemplate}" />
<Setter Property="Margin" Value="3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="GelBackground"
Opacity="1"
RadiusX="9"
RadiusY="9"
Fill="{TemplateBinding Background}"
StrokeThickness="0.35">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="white"
Offset="0" />
<GradientStop Color="#666666"
Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="GelShine"
Margin="2,2,2,0"
VerticalAlignment="top"
RadiusX="6"
RadiusY="6"
Opacity="1"
Stroke="transparent"
Height="15px">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#ccffffff"
Offset="0" />
<GradientStop Color="transparent"
Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter x:Name="GelButtonContent"
VerticalAlignment="center"
HorizontalAlignment="center"
Content="{TemplateBinding Content}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="GelBackground">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="lime"
Offset="0" />
<GradientStop Color="DarkGreen"
Offset="1" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="GelBackground">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#ffcc00"
Offset="0" />
<GradientStop Color="#cc9900"
Offset="1" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="black " />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Foreground" Value="black " />
</Trigger>
</Style.Triggers>
</Style>
I am planning to set the image's file destination in my code-behind (C#). For the output, the WPF button can both display the text and the image (placed in the right side of the text)
Any suggestions?
Your template includes a ContentPresenter, bound to the Content of the Button. So, you can simply set the image and/or text as the content of the button and they will go there.
<Button Style="{StaticResource ButtonStyler}">
<StackPanel Orientation="Horizontal">
<Image Source="..." />
<TextBlock Text="..." />
</StackPanel>
</Button>
just try this link. In this they created custom implementation of the button and a dependency property ImageSource so the you can use either from the code behind or from the XAML
Creating an image+text button with a control template?