today you helped me with Need multiple styles dependent on Listboxitem
But now i get a gray rectangle while drawing or moving the objects.
Picture with how it should look like, and how it looks like when iam drawing a line:
https://drive.google.com/file/d/0B_F04v1afwM5c0kteExsamlMcHM/edit?usp=sharing
here is the code i used:
<ListBox.Resources>
<DataTemplate DataType="{x:Type model:PathLine}">
<Path Stroke="{Binding ObjectColor}" StrokeThickness="{Binding StrokeThickness}" Data="{Binding PathGeometryData}" x:Name="PathLine" Opacity="{Binding Opacity}" >
</Path>
</DataTemplate>
<DataTemplate DataType="{x:Type model:ImageObject}">
<Image Source="H:\Dropbox\WPF Projekte\Arena WPF\ArenaProgram\ArenaProgram\Pictures\tree1.png" Name="imgPic1" Width="100" Height="75" Stretch="Fill" VerticalAlignment="Top" />
</DataTemplate>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="Crimson" ShadowDepth="3" BlurRadius="10" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
hope someone can help me :)
Aha! Finally, I know what you're talking about. :)
It seems to me that that (in my opinion, white) rectangle with a light crimson border is the ListBoxItem object. You added a Style that tells the ListBoxItem to display a crimson glow around its edge when it is selected, so that is what you are seeing. Try adding a Setter which sets the Background property to Transparent:
<Style TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="Crimson" ShadowDepth="3" BlurRadius="10"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
If that doesn't work, you might think about removing the Trigger altogether.
Related
Basically, i have a checkbox which has the IsChecked property binded in the viewmodel. This property is then evaluated inside a datatrigger to decide the color of a progress bar. The Progress bar itself, is styled with the code that i'm going to present.
Now, this code work:
<Style x:Key="CustomProgressBar" TargetType="ProgressBar">
<Style.Triggers>
<DataTrigger Value="True" Binding="{Binding Path=IsChecked}">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
<DataTrigger Value="False" Binding="{Binding Path=IsChecked}">
<Setter Property="Background" Value="Yellow"/>
</DataTrigger>
</Style.Triggers>
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Border BorderBrush="{DynamicResource ProgressBorderBrushColor}" BorderThickness="0" Background="{DynamicResource ProgressBackgroundColor}" CornerRadius="0" Padding="0">
<Grid x:Name="PART_Track">
<Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Fill" Value="{Binding}"/>
</Style>
</Rectangle.Style>
</Rectangle>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
while the following not:
<Style x:Key="CustomProgressBar" TargetType="ProgressBar">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Border BorderBrush="{DynamicResource ProgressBorderBrushColor}" BorderThickness="0" Background="{DynamicResource ProgressBackgroundColor}" CornerRadius="0" Padding="0">
<Grid x:Name="PART_Track">
<Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Value="True" Binding="{Binding Path=IsChecked}">
<Setter Property="Fill" Value="Red"/>
</DataTrigger>
<DataTrigger Value="False" Binding="{Binding Path=IsChecked}">
<Setter Property="Fill" Value="Yellow"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Can you tell me what is missing or what is wrong in the second xaml? (don't mind to the border part)
I think you have those backwards: the second example works, while the first does not.
The first example doesn't work because the Rectangle.Fill binding doesn't make sense. You're binding the Fill to whatever ProgressBar.DataContext is. Change the Rectangle definition to:
<Rectangle x:Name="PART_Indicator"
HorizontalAlignment="Left"
Fill="{TemplateBinding Background}" />
{TemplateBinding XYZ} is a short form of {Binding Path=XYZ, RelativeSource={RelativeSource TemplatedParent}. It means "bind to property XYZ on the control to which this template is applied". In this case, the template is applied to a ProgressBar, so we are binding Rectangle.Fill to the progress bar's Background. When your Setters update the background, the rectangle gets updated too.
I know there are a few questions surrounding the MahApps Metro styles, but i haven't found one that address the issue I am having.
I have an app that I am maintaining, a lot of which I helped build, using a central style XAML repository.
A part that I didn't build uses the style for the Metro Circle Toggle Button from MahApps. According to my Stakeholders, I need to change the selected state to be more contrasting from the normal state of the button. However I haven't been able to find where to go to access that style in my application.
My gut instinct is to create a complete style in my repository that replaces the Metro Style, but I figured I would ask around to see if anyone here could help me.
Any Hints wold be greatly appreciated.
Update 1:
I tried to use the BasedOn property to keep the amount of code down. I then set the background color to switch from black to white when "IsChecked" is True.
here is the code i added:
<Style x:Key="CustomCircleToggleButtonStyle"
TargetType="{x:Type ToggleButton}"
BasedOn="{StaticResource MetroCircleToggleButtonStyle}">
<Setter Property="Background" Value="{StaticResource DarkBorder}"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True" >
<Setter Property="Background" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
Unfortunately, there is some animation form the MahApps sinking through that makes the button go from the black, immediately to white then fade to the dark blue color that i am trying to get rid of.
Here is the wpf toggle button:
<ToggleButton Width="50" IsEnabled="{Binding IsMultipleSelected,Converter= {StaticResource BooleanNegate}}"
Height="50"
Style="{DynamicResource CustomCircleToggleButtonStyle}"
Command="{Binding Path=GroupSelectCommand}"
IsChecked="{Binding IsLasoSelected}">
<Rectangle Width="20"
Height="20"
Fill="{DynamicResource IconButtonActiveBorder}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill"
Visual="{DynamicResource appbar_lasso}" />
</Rectangle.OpacityMask>
</Rectangle>
</ToggleButton>
I am hoping to move a lot of this into the style, but I have to keep functional.
Right, so the reason it's not working with your example is you can't overwrite triggers that interact with ControlTemplate via Triggers from the Style....
So, if we go take a peek at line 615 here (which btw, I assume there's a file in your metro stuff named the same) we see inside the template the ControlTemplate.Triggers which on IsChecked is changing the opacity of ellipsebg ellipse. It in turn is hard set to fill of {DynamicResource AccentColorBrush}...
So...you could overwrite that brush at the instance level....or, just go edit the full style template to use a different brush all together.
In other words you could go change line 630 of Fill="{DynamicResource AccentColorBrush}" to another brush or brush resource and it would inherit to each instance (that would be my choice to keep centrally maintainable properties).
Or, at the instance something like:
<StackPanel>
<StackPanel.Resources>
<SolidColorBrush x:Key="AccentColorBrush">Red</SolidColorBrush>
<Style TargetType="ToggleButton"
BasedOn="{DynamicResource CustomCircleToggleButtonStyle}"/>
</StackPanel.Resources>
<ToggleButton/>
<ToggleButton/>
<ToggleButton/>
</StackPanel>
Make sense? :)
To close the loop, and post my answer for everyone else with the issue, I ended up creating a style that i put in my style repository. I think my Solution might be a little unique though as i don't actually have access the the MahApps.Metro source code in my solution.
Here is what I did:
<Style x:Key="CircleButton" TargetType="ToggleButton">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisual}"/>
<Setter Property="Margin" Value="2 2 2 2"/>
<Setter Property="Width" Value="45"/>
<Setter Property="Height" Value="45"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Ellipse x:Name="BorderCircle">
<Ellipse.Fill>
<SolidColorBrush Color="SlateGray"/>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="BodyCircle" Margin="3" >
<Ellipse.Fill >
<SolidColorBrush Color="Black"/>
</Ellipse.Fill>
</Ellipse>
<Rectangle x:Name="Mask"
Width="20"
Height="20"
Fill="{DynamicResource IconButtonActiveBorder}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill"
Visual="{DynamicResource appbar_lasso}" />
</Rectangle.OpacityMask>
</Rectangle>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="BodyCircle" Property="Fill" Value="White"/>
<Setter TargetName="BorderCircle" Property="Fill" Value="Black"/>
<Setter TargetName="Mask" Property="Fill" Value="Black"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BodyCircle" Property="Fill" Value="DarkOrange"/>
<Setter TargetName="BorderCircle" Property="Fill" Value="Black"/>
<Setter TargetName="Mask" Property="Fill" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This gives me total control of all aspects of the toggle button and the identical look as it had before. All i have to do to implement it is call it from the WPF view:
<ToggleButton IsEnabled="{Binding IsMultipleSelected,Converter={StaticResource BooleanNegate}}"
Style="{DynamicResource CircleButton}"
Command="{Binding Path=GroupSelectCommand}"
IsChecked="{Binding IsLasoSelected}">
</ToggleButton>
Hope this helps others out.
Due to all the noise about fancy, super, huge, and blah, blah, blah, tooltips, I cannot find the answer.
I just need a simple style that sets TextWrapping="Wrap" and allows me to set a width.
One that duplicates the existing / default style, but just word wraps.
<Window.Resources>
<Style TargetType="{x:Type ToolTip}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Rectangle Width="100" Height="100" Fill="Red">
<Rectangle.ToolTip>
<ToolTip Width="100">
This is some text with text wrapping.
</ToolTip>
</Rectangle.ToolTip>
</Rectangle>
</Grid>
This example is assuming you want to be able to set the width on a per-usage basis. If you want to set it as part of the style, add it to the TextBlock element.
This style prevents a tooltip from popping up on empty strings.
<Style TargetType="ToolTip">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<TextBlock Text="{TemplateBinding Content}"
MaxWidth="400"
TextWrapping="Wrap"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Content" Value="">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</Style.Triggers>
</Style>
Or using ContentTemplate:
<Style TargetType="{x:Type ToolTip}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding}"
MaxWidth="400"
TextWrapping='Wrap' />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Content" Value="">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</Style.Triggers>
</Style>
If you just want to get the effects below, have a read at this post.
I have tried the different examples on this site to get the list box / check box combo to change from the default gray when selected to another color to no avail.
What I am trying to do in the end is if the item is checked, the background will be white, and when unchecked it will gray out.
Here is what I have and any help would be appreciated.
Update the resource to the comment below.
The control has been updated to the reply and still not working, any ideas?
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding}"
Name="lstSwimLane" SelectionMode="Multiple"
Width="auto"
Height="auto"
Background="Transparent"
BorderThickness="0"
SelectionChanged="LstSwimLaneSelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsSelected" Value="{Binding Path=IsChecked, Mode=TwoWay}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="Border" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBrush}"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource UnselectedBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="3,3,3,3">
<CheckBox IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsSelected}"
Checked="ChkFilterChecked"
Unchecked="ChkFilterUnchecked"
VerticalAlignment="Center"
Margin="0,0,4,0" />
<TextBlock Text="{Binding Value}" VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Note: The checked checkboxes and list item combination is still gray and the unchecked is white.
Attached is a screen shot which seems to match the reply have below. I am stumped.
Here is the direct link in order to see the image bigger.
http://s1120.photobucket.com/albums/l489/nitefrog/?action=view¤t=jw_0012011-03-311325.jpg
Here is the screen shot of the checkboxes.
http://i1120.photobucket.com/albums/l489/nitefrog/jw_0022011-03-311345.jpg
Even though the brushes are set, for some reason they are not being triggered.
Any ideas?
Thanks.
My example doesn't use the myListboxStyle style, you can remove it. But change the ItemContainerStyle property:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="IsSelected" Value="{Binding Path=IsChecked, Mode=TwoWay}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="Border" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBrush}"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource UnselectedBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
It is very simple template and it has only two triggers: IsSelected=True and IsSelected=False.
And to complete this example add these brushes to the Resources collection:
<SolidColorBrush x:Key="SelectedBrush" Color="White"/>
<SolidColorBrush x:Key="UnselectedBrush" Color="Gray"/>
It would be better to edit the standard style for the ListViewItem, but I can't find it in the internet and I don't have Expression Blend now.
Screen of the result:
I have a combobox that i need to edit its error template to show a red border when there is a validation error.
I am using the following style
<Style TargetType="{x:Type ComboBox}" >
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel>
<Border BorderBrush="Red" BorderThickness="3">
<AdornedElementPlaceholder />
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="12" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
The border never shows up when validation errors occur. Any tips what is going wrong?
The Style you posted works. You should check your binding, did you add ValidatesOnDataErrors=True and ValidatesOnExceptions=True to the binding of SelectedValue?
enter code heretry without the dock panel, that is uneuseful since it wraps jus one element. However, sicnecerely I don't wnow if it makes sense to wrap a textbox with a border, since it has already a border! You should try to change directly the colour of its border. You could try to use again the panel but then put the border around the panel ie:
Border BorderBrush="Red" BorderThickness="3"
DockPanel
AdornedElement
This makes more sense because the wrap panel has not its own border.
Use This.
<Style x:Key="textBoxStyle" TargetType="{x:Type telerik:RadMaskedTextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
<Setter Property="Control.BorderBrush" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
I don't like any of the responses here. Simply put, how do you change the border color for the error template for a ComboBox using Blend or not? It shouldn't be acceptable to draw another border around the existing border of the ComboBox. I've figured out how to creat a ControlTemplate in Blend but not a Validation Template.
I've come close with trying to make it appear like I've changed the actual border color, but that's not what I actually want. Suggestions? To complicate it a bit, I'd like to display a red asterisk outside of the right border of the control.
The following code is a close attempt, but it is actually drawing a border inside the ComboBox and if you look close, you can see that the border is 2 pixels wide when combined with the ComboBox border:
<DockPanel Name="myDockPanel">
<AdornedElementPlaceholder>
<Border BorderBrush="Blue" BorderThickness="1" CornerRadius="2" />
</AdornedElementPlaceholder>
<TextBlock Text="*" FontWeight="Bold" FontSize="14" Foreground="Red" DockPanel.Dock="Left" ToolTip="{Binding .CurrentItem}" />
</DockPanel>
I searched around some more and came up with a solution based on another article here: WPF - How to apply style to AdornedElementPlaceholder's AdornedElement?
<!-- This works -->
<ComboBox Name="comboBox1" Style="{StaticResource NewComboBoxStyle}" Validation.ErrorTemplate="{StaticResource comboBoxValidationTemplate}" />
<SolidColorBrush x:Key="MainBorderBrush">#FF91B3FF</SolidColorBrush>
<Style x:Key="NewComboBoxStyle" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource myErrorTemplate}">
<Setter Property="BorderBrush" Value="{DynamicResource MainBorderBrush}" />
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="BorderBrush" Value="Blue" />
</Trigger>
</Style.Triggers>
</Style>
<!-- Sets ToolTip when Validation.HasError is True. -->
<Style TargetType="Control" x:Key="myErrorTemplate">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=(Validation.Errors).CurrentItem.ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="comboBoxValidationTemplate">
<DockPanel Name="myDockPanel">
<AdornedElementPlaceholder/>
<TextBlock Text="*" FontWeight="Bold" FontSize="14" Foreground="Red" DockPanel.Dock="Left" ToolTip="{Binding .CurrentItem}" />
</DockPanel>
</ControlTemplate>