could you please help me if there is anyway to make button hover and click image change? Here is my current code:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Name="MOP_Launcher" mc:Ignorable="d" x:Class="MainWindow"
Title="MOP Launcher" Height="523" Width="977" WindowStyle="None" ResizeMode="CanMinimize" WindowStartupLocation="CenterScreen" Cursor="Arrow" Icon="pack://siteoforigin:,,,/mop.png" Foreground="{x:Null}" Visibility="Visible" AllowsTransparency="True">
<Window.Background>
<ImageBrush ImageSource="pack://siteoforigin:,,,/MOP Launcher BG.png"/>
</Window.Background>
<Grid>
<Button x:Name="playbtn" Content="Button" HorizontalAlignment="Left" Height="91" Margin="779,422,0,0" VerticalAlignment="Top" Width="165" Foreground="{x:Null}" BorderBrush="{x:Null}" Template="{DynamicResource ButtonControlTemplate2}" >
<Button.Background>
<ImageBrush ImageSource="play.png"/>
</Button.Background>
</Button>
</Grid>
You can use button style to change the imagebrush as below:
<Button>
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="play.png"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseCaptureWithin" Value="true">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="pause.png"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Thanks
Related
THE PROBLEM
I have a resource in a resource dictionary called RoundCorner:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:PMSpotlightSearch">
<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid">
<Border x:Name="border" CornerRadius="20" BorderBrush="Gainsboro" BorderThickness="2">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.496,1.052">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
<TranslateTransform X="0.02" Y="0.3"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Offset="1" Color="#00000000"/>
<GradientStop Offset="0.3" Color="#FFFFFFFF"/>
</RadialGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontWeight="Bold" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.496,1.052">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
<TranslateTransform X="0.02" Y="0.3"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00000000" Offset="1"/>
<GradientStop Color="#FF303030" Offset="0.3"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FF33962B"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="grid" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
I have loaded it into App.xaml:
<Application x:Class="PMSpotlightSearch.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:PMSpotlightSearch"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="RoundedCornerButton.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
And it appears to work in my UserControl:
<UserControl x:Class="PMSpotlightSearch.SunkenButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Border Width="75" Height="40" BorderThickness="1">
<Button Name="btnMain" Height="30" Width="73" Content="{Binding Name}" Visibility="Visible" FontSize="12" Foreground="LightGray"
Click="Button_Click" Background="#FF292929" Style="{DynamicResource RoundCorner}">
</Button>
</Border>
</UserControl>
This produces no errors, and shows up in the preview:
Beautiful, right? Here's how it looks in Debug mode:
Like a typical button...
Any suggestions?
The solution is to add the ResourceDictionary directly to the UserControl. Adding it to App.xaml is NOT enough:
<UserControl x:Class="PMSpotlightSearch.GLButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="RoundCorner.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Border Width="50" Height="50" BorderThickness="1">
<Button Name="btnMain" Height="40" Width="40" Content="{Binding Name}" Visibility="Visible" FontSize="12" Foreground="LightGray"
Click="Button_Click" Background="#FF292929" Style="{DynamicResource RoundCorner}" />
</Border>
</UserControl>
I am trying to make window frame appear when user hovers "mybutton". This should work but for some reason it is not. What am I missing?
<Window x:Class="test2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" WindowStyle="None" Loaded="ShellWindow_SourceInitialized" x:Name="mywindow">
<Window.Resources>
<Style TargetType="{x:Type Window}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=mybutton}" Value="True">
<Setter Property="ResizeMode" Value="CanResize" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=mybutton}" Value="False">
<Setter Property="ResizeMode" Value="NoResize" />
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Name="mygrid" Loaded="Grid_Loaded">
<Button Name="mybutton" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"/>
</Grid>
(In case you are wondering what those "Loaded" functions are, they remove chrome while keeping the shadow and allowtransparency=false
http://marcin.floryan.pl/blog/2010/08/wpf-drop-shadow-with-windows-dwm-api)
At the end it will not be button but will react on whole window border (I can not find better way to enable resizing while removing all chrome)
In the style TargetType should be MainWindow
<Style TargetType="{x:Type local:MainWindow}">
where local has to be mapped to your namespace:
xmlns:local="clr-namespace:test2"
myButton is defined after style. XAML parser is not that smart. User the following XAML to get your intended behavior:
<Window x:Class="test2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" WindowStyle="None" Loaded="ShellWindow_SourceInitialized" x:Name="mywindow">
<Grid Name="mygrid" Loaded="Grid_Loaded" >
<Button Name="mybutton" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"/>
</Grid>
<Window.Style>
<Style TargetType="{x:Type Window}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=mybutton}" Value="True">
<Setter Property="ResizeMode" Value="CanResize" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=mybutton}" Value="False">
<Setter Property="ResizeMode" Value="NoResize" />
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Style>
</Window>
When I click on text box by mouse then focus does not display. and when I goes to textbox by keyboard then focus displayed. I am trying below code. So please can any one suggest me how I solve this issue.
<Style x:Key="TextBoxFocusVisualStyle" >
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Image Source="/Mit;component/Resources/txtFocus.png" Stretch="Fill" Margin="-8,-6,-8,-6"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<TextBox Grid.Column="2" Height="44" Margin="20,48,0,0" Name="txtEmailId" VerticalAlignment="Top" KeyboardNavigation.TabIndex="2" MaxWidth="400" HorizontalAlignment="Left" Width="350" Text="" FocusVisualStyle="{DynamicResource TextBoxFocusVisualStyle}" VerticalContentAlignment="Center" FontWeight="SemiBold" FontSize="18" ContextMenu="{x:Null}" />
I also tried below code after #hattenn answer:
<Application x:Class="WpfApplication1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background">
<Setter.Value>
<VisualBrush>
<VisualBrush.Visual>
<Grid>
<Image Source="/WpfApplication1;component/Resources/txtFocus.png" Stretch="Fill" Margin="-8,-6,-8,-6"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
and
<TextBox Height="23" Name="textBox1" Width="120" Focusable="True" FocusVisualStyle="{DynamicResource TextBoxStyle}"/>
But it does not work for me. nothing happened. please suggest.
Thanks
FocusVisualStyle is only for keyboard focus, you can check it out here:
http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.focusvisualstyle.aspx
For general focus, you can use the IsFocused property, more info below:
http://msdn.microsoft.com/en-us/library/system.windows.uielement.isfocused.aspx
As an example, you can try something like this:
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background">
<Setter.Value>
<VisualBrush>
<VisualBrush.Visual>
<Grid>
<Image Source="/Mit;component/Resources/txtFocus.png" Stretch="Fill" Margin="-8,-6,-8,-6"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Just add style to Textbox:
position:relative;
I have an style which defines a template for content controls.
For all controls that have the content property null, I'd like to show text saying the control is empty... but the xaml below is not working, does anybody know why?
<Style TargetType="ContentControl" x:Key="style">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Content, RelativeSource={RelativeSource Self}}" Value="{x:Null}">
<Setter Property="ContentControl.Template">
<Setter.Value>
<ControlTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Background="Blue">EMPTY!</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<ContentControl Content="{x:Null}" Style="{StaticResource style}" />
It's not showing me the text 'EMPTY!'.
Your code works. Take that GUI designer of yours and throw it out the window.
The following works:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="ContentControl" x:Key="style">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Content, RelativeSource={RelativeSource Self}}" Value="{x:Null}">
<Setter Property="ContentControl.Template">
<Setter.Value>
<ControlTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Background="Blue">EMPTY!</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<ContentControl Content="{x:Null}" Style="{StaticResource style}" />
</Grid>
</Window>
simply change your textblock values from between context to property text="empty" like
<TextBlock Background="Blue" Text="Empty"></TextBlock>
I was wondering if it is possible to make a custom shape custom control.
I need to make control which contains textbox, however the control must have a shape of triangle or sth more sophisticated than regular rectangle/square.
Short answer is yes.
Long answer is reading up on WPF Control Styles:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640"
Height="480">
<Window.Resources>
<Style x:Key="TextBoxSample" TargetType="{x:Type TextBox}">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Ellipse
x:Name="Border"
Stroke="#FF393785"
StrokeThickness="2"
>
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.25,0.25" RadiusY="0.75" RadiusX="0.75">
<GradientStop Color="White" Offset="0.2"/>
<GradientStop Color="#FF2EC452" Offset="0.5"/>
<GradientStop Color="#FF606060" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<!-- The implementation places the Content into the ScrollViewer. It must be named PART_ContentHost for the control to function -->
<ScrollViewer
x:Name="PART_ContentHost"
Background="Transparent"
HorizontalAlignment="Center"
VerticalAlignment="Center"
/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Fill" Value="#000" TargetName="Border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<TextBox
Style="{StaticResource TextBoxSample}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="TextBox"
Width="180"
Height="180"
/>
</Grid>
</Window>