I've taken a DatePicker and customised the style for usage on a tablet. I'm finding that while days can be selected the month cannot be changed. Neither clicking the previous/next button or on the month name has any affect, although the mouseover style is applied.
I've taken the default Calendar style and inserted a Viewbox to increase the size, as suggested by Mike Taulty: http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2010/11/17/touched-part-5-touch-ready-controls.aspx
<Style TargetType="controls:Calendar" x:Key="TabletCalendar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Calendar" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<StackPanel x:Name="Root" HorizontalAlignment="Center" >
<Viewbox Width="480" Height="440">
<controlsPrimitives:CalendarItem x:Name="CalendarItem" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" xmlns:controlsPrimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls" />
</Viewbox>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="controls:DatePicker" x:Key="TabletDatePicker">
<Setter Property="CalendarStyle" Value="{StaticResource TabletCalendar}" />
.....
</Style>
Fixed by moving the Viewbox up a level in the visual tree, not sure why there was a fault here but is working fine now!
Related
Lately I've had to re-style my WPF application based off of a style guide given to me by a designer. One of my new requirements is to change the look of the ProgressBar.
Most of the changes are rather simple, however what I'm having a difficult time figuring out is how can I add a simple shape to the end of the progress line.
I'm not trying to draw a shape at the far-right edge of the progress bar. Instead, If the progress meter is at 50%, I'd like to draw a Circle at the 50% point, and so on. Below is a sample image of what I'm trying to accomplish.
Please note, I've done something similar for the Slider control. However, it appears to be a much different beast. Thanks for the guidance.
Something like this works for me
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="BorderBrush" Value="#235b92" />
<Setter Property="Foreground" Value="#235b92" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Background" Value="#e8f0f7" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid Background="{TemplateBinding Background}"
Margin="10,5">
<Border x:Name="PART_Track"
BorderThickness="2"
BorderBrush="{TemplateBinding BorderBrush}" />
<Border x:Name="PART_Indicator"
HorizontalAlignment="Left"
Background="{TemplateBinding Foreground}">
<Ellipse Fill="#06e5ed" HorizontalAlignment="Right" VerticalAlignment="Center" Width="20" Height="20" Margin="-10,-5"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
That code yields the following result for me:
Whereas the red dotted area is just the highlighted PART_Indicator control
I've created a custom Usercontrol based on the Calendar control. I would like to use this calendar as the popup control within a datepicker, though it is not a style thus:
CalendarStyle="{StaticResource customCalendar}"
Does not work.
Is there anyway to do this without having to create an entire custom DatePicker?
I have found a solution, I can actually easily do this using styling.
<Style x:Key="CustomCalendar" TargetType="Calendar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Calendar}">
<StackPanel HorizontalAlignment="Center" Name="PART_Root" Background="LightGray">
<CalendarItem Background="{TemplateBinding Control.Background}" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="{TemplateBinding Control.BorderThickness}" Name="PART_CalendarItem" Style="{TemplateBinding Calendar.CalendarItemStyle}"/>
.
.
.
.
.
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
then placing all other controls I wish to use within the stack panel.
In my sample WPF-MVVM application , ihave one textbox and i have applied some Inner shade effects like this
<Style TargetType="{x:Type TextBox}" x:Key="TxtBoxStyle">
<Setter Property="Margin" Value="2,4" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid x:Name="txtgrid">
<Border x:Name="txtBorder" CornerRadius="5" Background="LightGray" BorderBrush="DarkGray"
BorderThickness="1" ClipToBounds="True">
<Border Background="Transparent" BorderBrush="Black"
BorderThickness="1" Margin="-2">
<Border.Effect>
<DropShadowEffect ShadowDepth="5" BlurRadius="10"/>
</Border.Effect>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But after applying these effects I am unable to enter values in textbox.
Please let me know whether my code is correct or not.
You have replaced the default template, but not provided anywhere to display the content. Your template only contains Borders.
If you take a look at the default TextBox template, you can see that it defines a named part called PART_ContentHost that takes the content. Try adding that to your template.
<ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
I would like to apply TextTrimming property (CharacterEllipsis) to the text in WPF DataGrid cells.
I applied custom DataGridCell template as in this answer (code below) and it works well, except for the Hyperlink columns like the first one in the picture), which now are empty.
<Style TargetType="DataGridCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border Padding="3" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock TextTrimming="CharacterEllipsis" Text="{Binding Text}"/>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I can see the difference in both column types in visual tree:
but don't understand how I can use this information to apply TextTrimming to TextBlock's columns of both type. Thanks for your time ;)
I finally ended up with the following solution (more like a workaround, but it works fine):
1) I assigned an x:Key to the style in question and applied it as a CellStyle to all DataGridTextColumns that should have their contents trimmed and ellipsisized whenever they don't fit
2) To apply ellipsis trimming in DataGridHyperlinkColumns, in App.xaml I added the following style:
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextTrimming" Value="CharacterEllipsis"></Setter>
</Style>
which will apply to all implicitly generated TextBlocks (as described in CodeNaked's answer). This might seem a bit overkill, but I can't see much difference in rendering performance and Hyperlinks are now trimmed as expected.
I have a Silverlight 4 out-of-browser application with a ScrollViewer that has several RichTextBoxes inside. The RichTextBoxes are only used for displaying text, and are never edited and never scroll.
However when the mouse is hovering over a RichTextBox the mousewheel event seems to not reach the ScrollViewer. Is there any way to overcome this limitation?
The reason a readonly RichTextBox doesn't scroll is because the default template for RichTextBox uses a ScrollViewer instead of a ContentControl. So to solve the problem, you need to create your own template for RichTextBox.
What I did was to create a copy of the RichTextBox template in Blend, and strip it down for the readonly case. This removes about 90% of the template. The following style/template remains:
<Style TargetType="c:RichTextBlock">
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="RootElement">
<Border x:Name="Border" CornerRadius="0"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
>
<ContentControl x:Name="ContentElement" IsTabStop="False" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Use this style/template for your readonly RichTextBox'es, and you should be good to go.
Goood luck,
Jim McCurdy
Face to Face Software and YinYangMoney