I have a WPF form that has TextBoxes and DatePickers. The DatePicker text boxes fonts are really fuzzy because of a drop shadow effect I put on the style. Initially all the controls had an explicit drop shadow effect as part of the style, but I fixed this by removing the drop shadow effect from the controls and moved it to Rectangles with the same drop shadow.
Then I place the Rectangle directly behind the textboxes - I still have the visual effect and the fonts in the overlaying controls looked great.
<DropShadowEffect x:Key="dropShadow" Color="Gray" Opacity=".50" ShadowDepth="8" />
<Style x:Key="BackingRectangleStyle" TargetType="Rectangle">
<Setter Property="Effect" Value="{StaticResource dropShadow}" />
</Style>
<Rectangle Grid.Row="1" Grid.Column="3" Style="{StaticResource BackingRectangleStyle}"/>
<TextBox Grid.Row="1" Grid.Column="3" ... />
However, I have the same problem with foggy fonts with DatePicker TextBoxes since the drop shadow effect is still directly on the control.
I do not have a DatePicker style, but I do have a style of the DatePickerTextBox, which is where the effect comes from.
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Effect" Value="{StaticResource dropShadow}" />
</Style>
What I don't know how to do is to follow my previous pattern of removing the effect, creating a Rectangle with the same effect and placing it behind the DatePicker TextBox so it's the same size, etc. I need a little help on the XAML to do so.
Can anyone provide me any advice?
Thanks!
Because knowlege about TextFormattingMode really needs spreading, I decided to post the following - even though it strangely doesn't help with the DatePickerTextBox, which is still fuzzy. It prevents you from the stunt you pulled with the rectangle behind the TextBox though.
Unless you have large, or transformed text, always use TextOptions.TextFormattingMode="Display" in your outermost WPF container.
This was introduced in WPF 4.0, and I suppose the default "Ideal" reflects earlier versions, but what a mind-boggling mistake that is...
<Window x:Class="WpfApplication1.MainWindow" x:Name="MyWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="400"
TextOptions.TextFormattingMode="Display"> <!-- Please notice the effect of this on font fuzzyness -->
<Grid>
<Grid.Resources>
<DropShadowEffect x:Key="DropShadow" Color="Gray" Opacity=".5" ShadowDepth="8"/>
</Grid.Resources>
<TextBox Text="Really Sharp" HorizontalAlignment="Center" Padding="3" VerticalAlignment="Center" Effect="{StaticResource DropShadow}"/>
</Grid>
</Window>
Related
I try to use the metro style from MahApps but buttons becomes not "SizeToContent" or becomes not AutoResized or something like that.
This is my button style
<Style x:Key="GrayMetroButtonStyle" TargetType="Button" BasedOn="{StaticResource LightMetroWindowButtonStyle}">
<Setter Property="Margin" Value="5"/>
<Setter Property="Background" Value="LightGray"/>
<Setter Property="Padding" Value="2"/>
</Style>
This is the style using in WPF. The width of the button's column is larger than the button needed to check autoresize.
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding ManifestFileName}" Margin="5" />
<Button Grid.Column="1" Content="Change" Margin="2" Visibility="{Binding LoadButtonVisibility}" Command="{Binding LoadManifest}" Style="{StaticResource GrayMetroButtonStyle}" />
</Grid>
And result is
As you see, content is out of the buttons width range.
If i clear the style refference, button get a properly behavior.
Which property are rule this behavior? How can i make this buttons autoresizable?
Thanks for replies.
According to the comments in the MahApps sources, LightMetroWindowButtonStyle is intended for the minimize, maximize, and close buttons in the title bar of a Metro-style window. For that reason, the style sets a fixed Width of 34.
It looks like the 'standard' button style for MahApps is MahApps.Metro.Styles.MetroButton, so I would suggest using that instead. It actually looks like this is the style that gets applied by default, as the second image you posted (the button with the style cleared) looks like it has this style already applied.
There are others too, like SquareButtonStyle and AccentedSquareButtonStyle, which are showcased in the MahApps example app:
If you want the 'flat' look, MetroFlatButton looks pretty similar to the button in the first image. You can see the various MahApps button styles in the MahApps docs and see the actual source code on GitHub .
Note that some of the button styles force their content to display in lowercase. If you want to avoid this, you can extend one of the MahApps styles and override a single property, e.g.:
<Style x:Key="SquareButtonStyleNormalCase"
BasedOn="{StaticResource SquareButtonStyle}"
TargetType="Button">
<Setter Property="m:ControlsHelper.ContentCharacterCasing"
Value="Normal" />
</Style>
I have an ItemTemplate of a ListBoxItem that contains a Slider. The UI should be operated on a touch screen. However, the slider doesn't work - the thumb cannot be dragged.
The problem can be demonstrated like this:
<StackPanel>
<Slider Height="40" Width="300" Margin="20,10,20,10"/>
<ListBox>
<Slider Height="40" Width="300" Margin="20,10,20,10"/>
</ListBox>
</StackPanel>
The slider inside the ListBox cannot be dragged by touch (although it works for mouse or keyboard input). The other slider outside of the ListBox works just fine (mouse, keyboard, touch).
What needs to be done to "enable" the slider inside the ListBox for touch input?
The accepted answer of Slider \ ScrollViewer in a touch interface not working properly will help here as well.
This is probably due to the ListBox and ItemsControl containing a ScrollViewer internally. Obviously this ScrollViewer is important to drag the ListBox itself (so I cannot get rid of it). However, the ScrollViewer can be tricked by the CustomThumb class of the other post.
Replacing the Thumb in the style is as easy as:
<Window
...
xmlns:l="clr-namespace:WpfApplication1"
...>
<Window.Resources>
...
<Style x:Key="SliderStyle1" TargetType="{x:Type Slider}">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
...
<Track x:Name="PART_Track" Grid.Row="1">
<Track.Thumb>
<l:CustomThumb x:Name="Thumb" .../>
</Track.Thumb>
</Track>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
You can do this by editing the style created by Expression Blend.
I'm looking at using the Silverlight Menu Control from Codeplex. It's functionally very good but I'd like to restyle the appearance. Is it possible to do this without just making a new copy of the template and changing a few properties? Here's an example from the generic "theme" that comes with the control:
<Style TargetType="GenericControl:MenuBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GenericControl:MenuBar">
<Canvas x:Name="LayoutRootMB">
<StackPanel Height="25"
x:Name="baseRectMB"
Canvas.Left="0"
Canvas.Top="0"
HorizontalAlignment="Left"
Orientation="Horizontal" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'd like to change, say, HorizontalAlignment to Stretch (for the sake of argument -- never mind if it'll actually accomplish anything useful). Is there any way to tell XAML (in XAML, not in C#) that I want to do something to baseRectMB?
baseRectMB is named in a TemplatePartAttribute on class MenuBar.
I assume I can simply copy the existing template and alter it, though I haven't gotten that working yet either.
I am setting some global styles for TextBox, ComboBox, TextBlock, etc. in my App.xaml file. I want these styles to flow down through the visual tree for a consistent look and that is what they are doing.
However, I am using a Ribbon in part of my UI. The style customizations are completely throwing off the appearance of the Ribbon. The ribbon sits at the same level as many other UI elements so is there a way to just reset the style for the ribbon and its visual children
I don't think that you can change this wpf behaviour.
But you can try to contain all global styles to specific resource dictionary and use it in all other VisualTree elements.
Or you can try something like this:
<Window ...>
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="Red" />
</Style>
</Window.Resources>
<DockPanel LastChildFill="True">
<Button x:Name="button1" Content="button" DockPanel.Dock="Top" />
<StackPanel>
<StackPanel.Resources>
<Style TargetType="Button">
</Style>
</StackPanel.Resources>
<Button x:Name="button2" Content="lala" />
</StackPanel>
</DockPanel>
</Window>
Element with name "button2" will be default.
Following a problem in WPF 4 where the default ProgressBar template has an off-white highlight applied causing it to dull the foreground colour, I decided to extract the template and manually edit the values to white.
After doing this, I put the template as a style in App.xaml for global use and the Visual Studio designer began to use it right away.
However, when I run my app, the default style is still being applied:
(source: nidonocu.com)
I then tried setting the style specifically using a key, then even having it as an inline style and finally as a inline template without a wrapping style for the specific progress bar and it is still ignored.
What's going wrong?
Current code for the ProgressBar:
<ProgressBar Grid.Column="1"
Grid.Row="2"
Height="15"
Width="355"
Margin="0,0,0,7"
IsIndeterminate="{Binding ProgressState, FallbackValue=False}"
Visibility="{Binding ProgressVisibility, FallbackValue=Collapsed}"
Value="{Binding ProgressValue, Mode=OneWay, FallbackValue=100}"
Foreground="{Binding ProgressColor,FallbackValue=Red}">
<ProgressBar.Template>
<ControlTemplate>
<Grid Name="TemplateRoot"
SnapsToDevicePixels="True">
<Rectangle RadiusX="2"
RadiusY="2"
Fill="{TemplateBinding Panel.Background}" />
...
I've found the error I believe. It seems that even though the template was extracted from the build in version. There was some kind of error with the following trigger in the template:
<Trigger Property="ProgressBar.IsIndeterminate">
<Setter Property="Panel.Background"
TargetName="Animation">
<Setter.Value>
<SolidColorBrush>#80B5FFA9</SolidColorBrush>
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
As soon as I removed this trigger (which had no visible impact on the visuals) the template began to work.
Just to be sure. You are binding internal Rectangle to the Background property, while it's not set in the ProgressBar definition (only Foreground is there). Is that correct?