I have made a custom control in wpf however I am having an issue with the button that forms a part of the item control (the x in each item element in the attached picture is the button) basically the button is disabled, but I am not disabling it!
If I just place one of the inner items (MultiSelectionItem) into a grid by itself then the button works fine, so it must have something to do with my usage of the ItemsControl element in the Template for the outer control (MultiSelectionBox)
Image:
<Style TargetType="{x:Type local:MultipleSelectionBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MultipleSelectionBox}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ItemsControl ItemsSource="{Binding multipleSelectionItems}">
<ItemsControl.Template>
<ControlTemplate>
<WrapPanel IsItemsHost="True"/>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type local:MultipleSelectionItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MultipleSelectionItem}">
<Border BorderBrush="#FFC0CBD9" BorderThickness="1" Margin="0,0,2,2" CornerRadius="0">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFDFE9F5" Offset="0" />
<GradientStop Color="#FFEEF3FC" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Command="{x:Static local:MultipleSelectionItemCommands.RemoveCommand}" IsEnabled="True">
<Button.Template>
<ControlTemplate>
<Image Source="/CustomFormResearch;component/Images/x_no_hover.jpg" Margin="2,0,0,0" Height="11" Width="11">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/CustomFormResearch;component/Images/x_no_hover.jpg" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="/CustomFormResearch;component/Images/x_with_hover.jpg" />
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Text="{Binding DisplayData}" VerticalAlignment="Stretch" Margin="5,0,5,0" Grid.Column="1" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My first guess is that since your button is bound to a Command, the CanExecute of the command should return false.
This is the principle and benefit of a Command: When the can execute returns false it automaticaly disable the associated button.
Check this links for more about commands and MVVM :
http://msdn.microsoft.com/en-us/magazine/dd419663.aspx
http://msdn.microsoft.com/fr-fr/magazine/cc785480.aspx#id0190094
Related
In a Button ControlTemplate I need to access the IsPressed event. How do I do that?
Background: I added a drop DropShadowEffect to a Button Style but got blurry text. This fix solved the blurry text issue. However this added a new issue. I wanted to remove the DropShadowEffect when the user clicks on the button. Figured I would do it like this;
<Style x:Key="DropShadowButtons" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border Background="{TemplateBinding Background}">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Border.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Opacity="0.5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Button.IsPressed" Value="False">
<Setter Property="Border.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="0" BlurRadius="0" Opacity="0" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,2,5,0"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Then figured out that Button.IsPressed would not fire being part of the Border. So how does the ControlTemplate access the event IsPressed of the Button?
You just need the trigger on the ControlTemplate instead of the Border's Style. For the Setter to target the Border, you'll need to give the Border a name, and you'll need to give the Setter a TargetName:
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border x:Name="BackgroundBorder" Background="{TemplateBinding Background}">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Border.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Opacity="0.5" />
</Setter.Value>
</Setter>
</Style>
</Border.Style>
</Border>
<Border Background="{TemplateBinding Background}">
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="5,2,5,0"
/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BackgroundBorder" Property="Effect">
<Setter.Value>
<DropShadowEffect
Color="Black"
Direction="320"
ShadowDepth="0"
BlurRadius="0"
Opacity="0"
/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
i have a simple interface that has two tabs vertically on the left side.
I have rounded the edges of the windows and the tabitems but i want the last tab(it happens to be the second but i would like it like that even if it was fifth or tenth) to not have rounded edges.
Heres the code, hope you can understand what i am trying to do cause i am new to this.
tle="MainWindow" Height="359" Width="504" Topmost="True" BorderThickness="0" WindowStyle="None" AllowsTransparency="True" BorderBrush="Black" Background="#0CFFFFFF">
<Window.Resources>
<LinearGradientBrush x:Key="SelectedBorderBrush" StartPoint="0,0" EndPoint="1,0" >
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="Gray" Offset="0.965"/>
<GradientStop Color="WhiteSmoke" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush >
<Style TargetType="{x:Type TabControl}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<DockPanel >
<Border
Panel.ZIndex="50"
Margin="0,10,-1,0"
Background="#FF0072C5"
BorderBrush="Gray"
CornerRadius="7,0,0,7"
BorderThickness="1">
<TabPanel
Margin="0,0,0,0"
IsItemsHost="True" />
</Border>
<Border
Background="WhiteSmoke"
BorderBrush="Gray"
BorderThickness="1"
CornerRadius="7,7,7,0" >
<ContentPresenter
ContentSource="SelectedContent" />
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border"
Background="#FF0072C5"
CornerRadius="7,0,0,0"
BorderBrush="Gray"
BorderThickness="0,0,0,1"
Panel.ZIndex="50"
Margin="0,0,0,0"
>
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="50,10,50,10"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter Property="Margin" Value="0,0,-2,0" />
<Setter TargetName="Border"
Property="BorderBrush"
Value="{StaticResource SelectedBorderBrush}"/>
<Setter TargetName="Border"
Property="Background"
Value="WhiteSmoke" />
<Setter TargetName="Border"
Property="CornerRadius"
Value="7,0,0,7" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<!--<Setter Property="Background" Value="Black" />-->
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<!--<Setter Property="Background" Value="Black" />-->
<Setter Property="Foreground" Value="#FF0072C5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid >
<TabControl Name="_menuTabControl" TabStripPlacement="Left" Margin="10,0" BorderThickness="1" ClipToBounds="True" Height="359" VerticalAlignment="Top" >
<TabItem Name="_tabItem1" Header="Name1" BorderThickness="1" Margin="0">
<Grid Width="334" Height="280" HorizontalAlignment="Stretch" Margin="0,25">
<!-- secret stuff here that i didnt copy :P -->
</Grid>
</TabItem>
<TabItem Name="_tabItem2" Header="Name2" BorderThickness="1" Margin="0" >
</TabItem>
</TabControl>
</Grid>
You can set style specific to tab items by giving x:Key value to style
<Style x:Key="TabItemRounded" TargetType="{x:Type TabItem}" >
Now set the style to TabItemRounded only for tabs where you want that style
<TabControl >
<TabItem Header="ABC" Style="{StaticResource TabItemRounded}"></TabItem>
<TabItem Header="PQR"></TabItem>
</TabControl>
I am using custom ComboBox with style, I want to set width of a Popup dynamically via coading so that to auto adjust the width of popup
so I wanted to change Popup like second image dynamically(whatever may be thesize of ComboBox)
I am using style as follows
<Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="#666666"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Height" Value="28"/>
<Setter Property="BorderThickness" Value="1.5"/>
<Setter Property="Padding" Value="4,3"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Popup Margin="1" x:Name="PART_Popup" AllowsTransparency="true" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2" Width="{Binding ActualWidth,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Grid}}">
<Border Name="DropDownBorder" Width="Auto" Height="Auto" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4" BorderBrush="#FFbbbbbb">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FFE9E9E9" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<ScrollViewer CanContentScroll="true">
<ItemsPresenter />
</ScrollViewer>
</Border>
</Popup>
<ToggleButton Style="{StaticResource cmbToggle}" Grid.ColumnSpan="2" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter HorizontalAlignment="Left" Margin="5,0,0,0" VerticalAlignment="Center" IsHitTestVisible="false" Content="{TemplateBinding SelectionBoxItem}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="cmbToggle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Name="cmbBorder" CornerRadius="3" BorderBrush="#FFaaaaaa" BorderThickness="1.5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FFE9E9E9" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush="#FFaaaaaa" BorderThickness="1,0,0,0" Width="20" HorizontalAlignment="Right">
<Polygon Name="pol" Fill="#FF787878" Points="4,9 8,14 12,9" Stroke="#FF787878" StrokeThickness="0" Margin="1 1 0 0">
</Polygon>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="CornerRadius" TargetName="cmbBorder" Value="4,4,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So My idea is to change width of Popup dynamically(Combobox width - togglebutton width = popup width).I have written style in App.xaml
How to do this, Please help me. Thanks in advance.
Ok so in your ToggleButton Style we can see the Border holding Polygon arrow is 20 in Width. That's the Width to be removed from the Popup
Thus we can do something like:
Firstly add 2 Column's to the Grid in ComboBox ControlTemplate
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<!-- New Bit -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<!-- End of New Bit -->
<Popup x:Name="PART_Popup"
Grid.ColumnSpan="2"
...
and then update the Width of Popup to
<Popup x:Name="PART_Popup"
Grid.ColumnSpan="2"
Width="{Binding Path=ColumnDefinitions[0].ActualWidth,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=Grid}}"
...
Your Style already has ColumnSpan mentioned on appropriate controls, so nothing else is needed. This should give you the output your looking for.
you can directly use
<ComboBox.Resources>
<Style TargetType="{x:Type Popup}">
<Setter Property="Width" Value="110"/>
</Style>
</ComboBox.Resources>
Using Dhaval Patel's solution bound to a view model property did the trick.
I calculate the max width using FormattedText when the collection changes and it bind it below.
<ComboBox.Resources>
<Style TargetType="{x:Type Popup}">
<Setter Property="Width" Value="{Binding MaxWidthOfMyCollection"/>
</Style>
</ComboBox.Resources>
So I was suggested to use WPF forms to make a custom UI for my applications. The first thing I wanted to try was to change the look of the progress bar. The only thing holding me back from it's new look atis the glossy effect over the top of it. I want the progrss bar to be made of mostly solid colours. Is there anyway to remove the glossy part of the progress bar?
Shown here:
Thanks.
Nasreddine answers is very good but if you want something simpler you can use the following
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Border BorderBrush="#D9DCE1" BorderThickness="1" Background="#E8E8E8" CornerRadius="0" Padding="0">
<Grid x:Name="PART_Track">
<Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#FF49A3E1" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can achieve any style you want by editing the ControlTemplate of the progress bar. Here's an example :
Disclaimer: I'm not a designer.
<!-- Brushed used by the progress bar style -->
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" EndPoint="0,0" MappingMode="Absolute" StartPoint="-100,0">
<GradientStop Color="#00000000" Offset="0"/>
<GradientStop Color="#FF000000" Offset="0.4"/>
<GradientStop Color="#FF000000" Offset="0.6"/>
<GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ProgressBarTopHighlight" Color="#80FFFFFF" />
<!-- progress bar style -->
<Style x:Key="FlatProgressBar" TargetType="{x:Type ProgressBar}">
<Setter Property="Foreground" Value="#01D328"/>
<Setter Property="Background" Value="#C7C7C7"/>
<Setter Property="BorderBrush" Value="#B2B2B2"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="Background" SnapsToDevicePixels="true">
<Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2"/>
<Border Background="{x:Null}" CornerRadius="2" Margin="1"/>
<Border BorderBrush="#80FFFFFF" BorderThickness="1,0,1,1" Background="{StaticResource ProgressBarTopHighlight}" Margin="1"/>
<Rectangle x:Name="PART_Track" Margin="1"/>
<Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="1">
<Grid x:Name="Foreground">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="15"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition MaxWidth="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle x:Name="Indicator" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2"/>
<Rectangle x:Name="Animation" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2">
<Rectangle.OpacityMask>
<MultiBinding>
<MultiBinding.Converter>
<Themes:ProgressBarHighlightConverter/>
</MultiBinding.Converter>
<Binding Source="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
<Binding ElementName="Background" Path="ActualWidth"/>
<Binding ElementName="Background" Path="ActualHeight"/>
</MultiBinding>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
</Decorator>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="Background">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter Property="LayoutTransform" TargetName="PART_Track">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="LayoutTransform" TargetName="PART_Indicator">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="LayoutTransform" TargetName="Foreground">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsIndeterminate" Value="true">
<Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsIndeterminate" Value="false">
<Setter Property="Fill" TargetName="Animation" Value="#80B5FFA9"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Apply this style to your ProgressBar and you're good to go :
<ProgressBar Style="{StaticResource FlatProgressBar}" Value="50" />
Here's the end result :
I have Grid in wpf. When I do mouseover on rectangle, I can see color change. But when I do mouseover on content, I see original color of rectangle.
What should I write to apply same mouseover effect on ContentPresenter or is there any way to change rectangle background color on mouse over of content presenter.
<Grid Background="{TemplateBinding Background}" x:Name="dgColumnHeader">
<Border x:Name="border" BorderBrush="Black" BorderThickness="0,0,1,1" Grid.ColumnSpan="1">
<Rectangle Width="116" Margin="3,3,3,3" HorizontalAlignment="Center" RadiusX="7" RadiusY="7">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="{DynamicResource ContentOutofFocusBrush}"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="{DynamicResource ActiveItemBrush}" />
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Border>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" />
</Grid>
Thanks
Dee
If the grid is part of your control template then it is better to move the rectangle style trigger into ControlTemplate.Triggers:
<Window x:Class="Presentation2.MouseOverRectangleWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MouseOverRectangleWindow" Height="300" Width="300">
<Window.Resources>
<SolidColorBrush x:Key="ContentOutofFocusBrush" Color="Orange"/>
<SolidColorBrush x:Key="ActiveItemBrush" Color="Blue" />
<Style x:Key="MouseOverContentControlStyle" TargetType="{x:Type ContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid Background="{TemplateBinding Background}" x:Name="dgColumnHeader">
<Border x:Name="border" BorderBrush="Black" BorderThickness="0,0,1,1" Grid.ColumnSpan="1">
<Rectangle x:Name="PART_Rectangle" Width="116" Margin="3,3,3,3" HorizontalAlignment="Center" RadiusX="7" RadiusY="7">
<Rectangle.Style>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="{DynamicResource ContentOutofFocusBrush}"></Setter>
</Style>
</Rectangle.Style>
</Rectangle>
</Border>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Rectangle" Property="Fill" Value="{DynamicResource ActiveItemBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ContentControl Style="{StaticResource MouseOverContentControlStyle}">
<TextBlock Text="Hello World!" />
</ContentControl>
</Grid>
</Window>
you don't need a rectangle inside your Border. Change the Background of the Border, you ll have same result. Then put the ContentPresenter inside that Border, and set the MouseOver handler on the Border, it should work fine.