I'm buiding a WPF custom control I'm calling a ResponseTimer. This basically consists of a DispatcherTimer and a ProgressBar. It has properties called TimeElapsed and TimeoutPeriod that are TimeSpans. In the user interface of my program, events occur periodically. There is a time period within which the user can resopnd to the event. If the interval expires, the program takes action on its own.
I want to use this control in two places. One will be on an item that appears in a ListBox, the other at the bottom of a window. For the copes in the ListBox, when the time period has expired, I want to hide the ProgressBar, while I don't want to hide the control at the bottom of the window.
To get this functionality, I've defined two bool DependcyProperties called HideIfExpired and IsExpired. If HideIfExpired is true, then the ProgressBar will be hidden if IsExpired is true. Simple.
I want to use triggers in the default content template for the control in Generic.xaml. I'm not sure how to write the triggers, though.
Here's the XAML for the control:
<Style TargetType="{x:Type local:ResponseTimer}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ResponseTimer}">
<StackPanel Visibility="{TemplateBinding Visibility}">
<ProgressBar Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
FlowDirection="{TemplateBinding FlowDirection}"
Foreground="{TemplateBinding Foreground}"
Height="{TemplateBinding Height}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
IsEnabled="{TemplateBinding IsEnabled}"
IsTabStop="False"
Margin="{TemplateBinding Margin}"
MaxHeight="{TemplateBinding MaxHeight}"
MaxWidth="{TemplateBinding MaxWidth}"
MinHeight="{TemplateBinding MinHeight}"
Minimum="0"
MinWidth="{TemplateBinding MinWidth}"
Name="PART_ProgressBar"
Opacity="{TemplateBinding Opacity}"
OpacityMask="{TemplateBinding OpacityMask}"
Orientation="{TemplateBinding Orientation}"
Padding="{TemplateBinding Padding}"
Panel.ZIndex="{TemplateBinding Panel.ZIndex}"
RenderSize="{TemplateBinding RenderSize}"
RenderTransform="{TemplateBinding RenderTransform}"
RenderTransformOrigin="{TemplateBinding RenderTransformOrigin}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Style="{TemplateBinding Style}"
Tag="{TemplateBinding Tag}"
ToolTip="{TemplateBinding ToolTip}"
UseLayoutRounding="{TemplateBinding UseLayoutRounding}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"
Visibility="{Binding Path=IsExpired, Converter={StaticResource InvertedBoolToVisibility}, RelativeSource={RelativeSource TemplatedParent}}"
Width="{TemplateBinding Width}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm not sure any more why the StackPanel is in there, it may be a remnant of a previous version of the control. I might replace it with a Border, just to have a way to hide the whole thing.
Anyway, how do I write my triggers?
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsExpired" Value="True" />
<Condition Property="HideIfExpired" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Visibility" Value="Collapsed" />
</MultiTrigger.Setters>
</MultiTrigger>
</ControlTemplate.Triggers>
Related
I have some labels like this:
<Label x:Name="ledCalculate" Width="Auto" Content="Calculate" Height="25" FontFamily="Cambria" FontSize="18.667" VerticalContentAlignment="Bottom" Padding="10,0,0,0" BorderThickness="0,0,0,1" Style="{StaticResource RightPanelLabels}" Grid.Row="11"/>
I defined a style for it:
<Style TargetType="Label" x:Key="RightPanelLabels" BasedOn="{StaticResource
{x:Type Label } }">
<Setter Property="Foreground" Value="#FFEABEBE"></Setter>
<Setter Property="BorderBrush" Value="#FF818080"></Setter>
<Setter Property="BorderThickness" Value="0,0,0,1"></Setter>
</Style>
Border thickness setter in style applies for control and it has upper precedence in style, and visual studio ignores its values in local, but foreground setter in style does not applies, when i set it locally it applies,
Why border thickness in style have upper precedence but foreground in local have upper precedence????????
I know there is a default template for labels like bellow that have a trigger for IsEnabled , that template is something like this:
<ControlTemplate TargetType="{x:Type Label}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Can anyone help me?
Sorry for my English.
All the local styles take precedence over defined styles, so inline styles will always override other styles defined in resources.
When I run the code I found that Style's BorderThickness also get overridden by the local inline style value for BorderThickness as well.
I too would love to hear if there's a workaround for this.
I found this article as well, hope it helps Same problem with a style trigger though
EDIT:
Upon trying it few different ways I found using this method we can override the label's inline Foreground style, but I don't know whether it's the healthiest way
<Style TargetType="{x:Type Label}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}"
Foreground="Red" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Label FontSize="50" Foreground="Black"> I am Black inline, Red on Style </Label>
This is me just editing the ContentTemplate of the Label .
Basically, this possible for Label because Label derives from ContentControl whereas TextBlock lives in the System.Windows.Controls namespace, it is not a control. It derives directly from FrameworkElement.
TextBlock are used in many other controls to show texts, including in Label.
Refer this article to know more about this
you have to change property name in style setter
<Setter Property="TextBlock.Foreground" Value="#FFEABEBE">
I have a Button with a custom control template and a Grid as sibling. The Button should use the TriangleUpPath when the Grid is visible, otherwise it should use the TriangleDownPath. So far so good.
But I want that the Path has a Border around. So I thought I could just set the BorderBrush of the ContentControl, but this does not work. I don't see the Border. Same goes for the Background of the ContentControl.
Here is my minimal not working example:
<Button x:Name="_hideButton"
Grid.Row="0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Click="ToggleResultsVisibility">
<Button.Style>
<Style TargetType="Button" >
<Style.Resources>
<Path x:Key="TriangleUpPath"
Data="M 0,5 L 7,0 L 14,5"
Margin="3,3,0,0"
Stroke="Black"
StrokeThickness="1"/>
<Path x:Key="TriangleDownPath"
Data="M 0,0 L 7,5 L 14,0"
Margin="3,3,0,0"
Stroke="Black"
StrokeThickness="1"/>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentControl Margin="0,5,5,0"
Width="20"
Height="11"
BorderBrush="Magenta"
BorderThickness="1"
Background="Cyan">
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="Background"
Value="HotPink"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Visibility, ElementName=_resultsGrid}"
Value="Collapsed">
<Setter Property="Content"
Value="{StaticResource TriangleDownPath}"/>
</DataTrigger>
<DataTrigger Binding="{Binding Visibility, ElementName=_resultsGrid}"
Value="Visible">
<Setter Property="Content"
Value="{StaticResource TriangleUpPath}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Grid x:Name="_resultsGrid"/>
As you can see, I even tried to set the Background in the Style (to HotPink) to no avail.
It helps, when I have a Border around the ContentControl.
But the question is: why do the Background-Property and the BorderBrush-Property of the ContentControl have no influence?
The default style for ContentControl does not contain a way of rendering the Border and Background properties, it just has a ContentPresenter.
You need to add a custom template for the content control yourself, containing the additional elements you need:
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Cursor="{TemplateBinding Cursor}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</ContentControl.Template>
It's because BorderThickness/Brush aren't some magic properties that make the border magically appear out of nowhere.
For making borders, you should be using a <Border> element somewhere.
By default, the Button has some Border inside. That's why setting BorderBrush/BorderThickness on a Button does something. Specifically, the default control template of a Button contains a Border as one of its topmost elements, and that Border's definition looks similar to:
// the DEFAULT Button's control template
<ControlTemplate>
...
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
.... >
...here goes other things like textblock/content..
</Border>
...
</ControlTemplate>
so, as you see, there's a border and it has its settings bound to the owning control, so bound to the Button. The TemplateBinding binds BBrush of Border to BBrush of the Button that owns it.
Now, as you have completely rewritten/overridden the Button's control template, it now does not contain any Border, so there is nothing that would draw the border.
Try:
<Border BorderBrush=... BorderThickness=...>
<ContentControl ....
and it should be like you wanted.
Afterthought: If I understood you wrong and if you meant your setting the BorderBrush/Thickness on the ContentControl inside the buttons' template that it didn't add border around your paths, then there's a surprise.
The properties are available on the CC only because they are commonly used, they came from base Control class. But the ContentControl does not use them at all. They are ignored. ContentControl does not draw any borders, texts, etc. ContentControl shows its content, and the content is just a Path which draws itself only. So, either add a Border around the ContentControl as above, or change your resources and wrap each Path into a Border and use that as a content resource.
<Style.Resources>
<Border x:Key="TriangleUpPath"
BorderBrush=... BorderThickness=...
<Path Data="M 0,5 L 7,0 L 14,5"
.... />
</Border>
<Border x:Key="TriangleDownPath"
BorderBrush=... BorderThickness=...
<Path Data="M 0,0 L 7,5 L 14,0"
.... />
</Border>
</Style.Resources>
Need an advice (better from your real projects) - what is the best way to do visual inheretence in WPF?
More concrete: How to inherete window view with a statusbar?
There is no way to inherete one xaml file from another. Then, are you create User Control MyStatusbar and paste it on every page?
It is possible to create Style Template for base window and use style inheretence, however this only for simple visual properties (color, size).
Second idea is to create base DataTemplate, but there is no inheritance.
P.S. In WinForms there is base Form with status bar and some logic. After adding property
public string StatusbarText {set{baseStatusbar.Text = value;}}
it is very simple to use the property in child forms. Plus we have view inheritance with status bar.
I know how to inherete logic in WPF, but what to do with visualisation.
You could certainly create a custom Window control that adds a StatusbarText property. Alternatively, you could use a custom Style for Window, the only question there is how to pass the status bar items into your Style. For that you can use attached properties.
If you go this route, you cannot inherit your custom Style from the default one, as you need to completely redefine the ControlTemplate. A Style for Window would look like:
<ControlTemplate x:Key="WindowTemplateKey"
TargetType="{x:Type Window}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<AdornerDecorator>
<DockPanel>
<StatusBar DockPanel.Dock="Bottom" ItemsSource="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter/>
</DockPanel>
</AdornerDecorator>
<ResizeGrip x:Name="WindowResizeGrip"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Visibility="Collapsed"
IsTabStop="false"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Window.ResizeMode"
Value="CanResizeWithGrip"/>
<Condition Property="Window.WindowState"
Value="Normal"/>
</MultiTrigger.Conditions>
<Setter TargetName="WindowResizeGrip"
Property="Visibility"
Value="Visible"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="{x:Type Window}"
TargetType="{x:Type Window}">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<AdornerDecorator>
<DockPanel>
<StatusBar DockPanel.Dock="Bottom" ItemsSource="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter/>
</DockPanel>
</AdornerDecorator>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Window.ResizeMode"
Value="CanResizeWithGrip">
<Setter Property="Template"
Value="{StaticResource WindowTemplateKey}"/>
</Trigger>
</Style.Triggers>
</Style>
If you use the Style above, you can set the Window.Tag property to be a list of items you want displayed in the StatusBar. The biggest problem with this approach is you would need to add attached properties for things like StatusBar.ItemContainerStyle so you can customize the look of your status bar.
Same holds for if you use a DataTemplate. So i you know you only ever want single text in your StatusBar, you could use the following in the ControlTemplates above and set the Window.Tag to the string (or use an attached property).
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Content="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" />
</StatusBar>
It's better to use MVVM, look WPF Apps With The Model-View-ViewModel Design Pattern
You can write a base ViewModel with StatusbarText property and then inherit from the base ViewModel.
Then you can use this ViewModel property with data binding in Styles and Templates, look Customize Data Display with Data Binding and WPF
Also look at this question
I'm putting a WPF application together in which I have an image control which I want to bind a custom command object to from my view model that will execute when the image is clicked. I have exposed the command object from my view model and just need to bind it to the image control.
Is it possible to bind this command object to an image control? If so any advice would be appreciated.
Here's yet another solution I personally love to use most of the time if I want an image with command without enclosing it in another control.
<Image Source="Images/tick.png" Cursor="Hand" Tooltip="Applies filter">
<Image.InputBindings>
<MouseBinding Gesture="LeftClick" Command="{Binding ApplyFilter, Mode=OneTime}" />
</Image.InputBindings>
</Image>
I set its properties Hand and Tooltip so that it's more clear that it's an action and not a static image.
You need to put the image in a button, and bind the button to the command:
<Button Command="{Binding MyCommand}">
<Image Source="myImage.png" />
</Button>
If you don't want the standard button chrome, just change the template of the button with something like that:
<ControlTemplate x:Key="tplFlatButton" TargetType="{x:Type Button}">
<Border Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}"
TextElement.FontFamily="{TemplateBinding FontFamily}"
TextElement.FontSize="{TemplateBinding FontSize}"
TextElement.FontStretch="{TemplateBinding FontStretch}"
TextElement.FontWeight="{TemplateBinding FontWeight}"/>
</Border>
</ControlTemplate>
Note that you will also need to change other properties to override the default button style, otherwise the template above will use the default button background and border:
<Style x:Key="stlFlatButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template" Value="{StaticResource tplFlatButton}" />
</Style>
It can be simpler to avoid using a button and use a Hyperlink instead:
<TextBlock DockPanel.Dock="Top">
<Hyperlink Command="{Binding SomeCommand}">
<Image Source="image.png" />
</Hyperlink>
</TextBlock>
Note that this will render the hyperlink with the default text decoration, so you'll want to add a style that removes that - putting this in the resource dictionary of the containing element will do the trick:
<Style x:Key={x:Type Hyperlink}" TargetType="Hyperlink">
<Setter Property="TextDecorations"
Value="{x:Null}" />
</Style>
Simplified version of answer from #Robert Rossney:
<TextBlock>
<Hyperlink Command="{Binding SomeCommand}" TextDecorations="{x:Null}">
<Image Source="{StaticResource image.png}" Width="16" />
</Hyperlink>
</TextBlock>
The best way to include an image is to use a {StaticResource x}, see WPF image resources
reset control template of the button and use image in control template..
<Button Width="100" Height="100" Command="{Binding SampleCommand}">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Image Stretch="Uniform" Source="Images/tick.png"></Image>
</ControlTemplate>
</Button.Template>
</Button>
How can i solve the following (simplified) problem?
M-V-VM context. I want to show text at the UI.
In case the user has the rights to change the text, i want to use a textbox to manipulate the text.
In case the user has no rights, i want to use a label to only show the text.
My main problem: how to exchange textbox and label and bind Text resp. Content to the same property in viewmodel.
Thanks for your answers
Toni
There are a few ways of achieving this, with varying degrees of ease of reuse. You can have a DataTemplateSelector that could return the appropriate DataTemplate for a given property (depending on how this is written, you may be able to use it for each of your properties).
You could create a DataTemplate for each property, and change visibility based on a DataTrigger (this gets really annoying, as it is a lot of copy and paste).
I think the easiest way of doing this is with a specialized ControlTemplate for the TextBox. Basically, when it is disabled, instead of graying it out, you can just make it look like a TextBlock:
<ControlTemplate x:Key="PermissionedTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="bd" Property="BorderBrush" Value="{x:Null}" />
<Setter TargetName="bd" Property="Background" Value="{x:Null}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Then you can use it like so:
<TextBox Text="{Binding PermissionedText}" IsEnabled="{Binding CanEdit}" />