Develop Reference

Setter Target Name not recognized

I'm a beginner at WPF and I try to write a WPF part with DataTrigger.
Here the needed logic:
If the variable "iBottleCount" >= 10 then make the background of a label green.
If the variable "iBottleCount" < 10 then make the background of a label yellow.
If the variable "iBottleCount" = 0 then make the background of a label red.
But he can'f find my label with the targed name "StatusColor".
Find the code below:
<DataGridTemplateColumn Header="Status" Width="80" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="StatusText" Height="15" HorizontalAlignment="Left" Margin="2,2,2,2" Text="" VerticalAlignment="Top" Grid.Row="0" Grid.Column="1"/>
<Label x:Name="StatusColor" Content="" Background="green" HorizontalAlignment="Center" Margin="5,5,5,5" VerticalAlignment="Top" Height="10" Width="20" Grid.Row="0" Grid.Column="0"/>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<DataTrigger Binding="{Binding iBottleCount}" Value="=>10">
<!-- PROBLEM IS IN THIS LINE -->
<Setter TargetName="StatusColor" Property="Background" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>
So what's the problem? The label is defined some lines higher.

The template has its own scope that cannot be accessed from outside. You cannot use TargetName in Style triggers anyway, if you need to change the Label, add a trigger to its Style.

Without a good Minimal, Complete, and Verifiable code example that shows clearly what you're trying to do, it's impossible to know for sure what the best fix is. That said…
First off, the comment in H.B.'s answer is correct: you're trying to access a named element where that name is not in scope at the point where you are trying to access it, and even if you could, the Style trigger can't use the TargetName property.
Certainly one option is to move the trigger to the template. This, however, will require that the template be tied to the view model you're using. This might actually be okay in your case. There's not enough context in the question to know.
If you'd rather stay closer to the design you've got now, where the trigger is in the DataGridCell style, you can use TemplateBinding to accomplish what you want. For example…
In the template:
<Label Content="" Background="{TemplateBinding Background}" HorizontalAlignment="Center"
Margin="5,5,5,5" VerticalAlignment="Top" Height="10" Width="20"
Grid.Row="0" Grid.Column="0"/>
And then, setting the Background property of the DataGridCell will propagate down into the template. I.e. in your style's trigger:
<Setter Property="Background" Value="Green"/>
I.e. just remove the TargetName attribute from your existing code.
Obviously, this works only if you have a single Background value you want to set in the template. You'll need something more elaborate if you have a more complex scenario. Also, of course don't forget that if you want to provide a default value for the Background property, you need to include a non-trigger <Setter .../> element in the style to set that default value.

Border fail to size to Textblock

In an attempt to go around the problem described in this other question: Segoe UI Symbol smiley is sometimes colorful, sometimes not (WP8.1 + XAML), I tried the following: wrapping my Textblock with a Border element with rounded-corners (high CornerRadius). This way I can change the background color of the border and it looks pretty much as if the smiley had a background color itself... almost.
There is still a small gotcha I cannot wrap my head around: the height of the TextBlock seems to be out of my control. The "Segoe UI Symbol" (smiley) I want to display acts as if it had some kind of padding that prevented the border to fit the icon exactly. I end up with some kind of oval shape around my round smiley... not quite what I had in mind.
I stripped the XAML to its bare essence and played with it in a new blank app (just paste this in a new app, you should see exactly the screenshot below):
<Grid>
<Border Background="Red" Grid.Column="0"
CornerRadius="50" BorderThickness="0"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="😠"
FontFamily="Segoe UI Symbol" FontSize="50"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Grid>
This gives you that:
Any idea what I can tweak there?

The problem is that the text (emoticon) has not the same height and width. You can do a custom fix by applying a custom style to the textbox and change its padding until you achieve the result you want. It's not a dynamic solution but if the size of the icon is standard this solution i think will work.
First of all create a new style:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
<Setter Property="Padding" Value="10,0,10,3"/>
</Style>
</phone:PhoneApplicationPage.Resources>
Then apply it to the TextBlock
<Grid>
<Border Background="Red" Grid.Column="0"
CornerRadius="50" BorderThickness="0"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="😠"
FontFamily="Segoe UI Symbol" FontSize="50"
HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource CustomTextBlockStyle}" />
</Border>
</Grid>
The result:
If you want something like this:
Try to play around with padding and margin too
<Style x:Key="CustomTextBlockStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="-2,-13,-2,-9"/>
<Setter Property="Padding" Value="0,0,0,0"/>
</Style>

How to increase the thickness of a `Slider` control

I have a slider control in my grid:
<Slider x:Name="MainSlider"
Margin="659,145,417,146"
Grid.Row="1"
Orientation="Vertical"
SmallChange="1"
RenderTransformOrigin="0.0799999982118607,0.5"/>
I want it to be wider though, so that the whole bar is stretched out.
I've gone through the properties and Width doesn't actually change the thickness of the slider itself, just the frame.
How can I make the actual Slider thicker?

You will probably need to define your own style. You can copy the default style (using Expression Blend for example) and tweak the individual component values.
Use the "Edit Style" option to take a copy of the template and then work on that.
There's more information on MSDN

You can customize the style template of Slider as per your requirement:
http://codingsense.wordpress.com/2010/02/01/customize-a-slider-in-wpf-step-by-step-tutorial/
http://msdn.microsoft.com/en-us/library/vstudio/ms753256%28v=vs.90%29.aspx

If you make a template from a copy of the slider template:
Right-Click Slider->"Edit Template" -> "Edit a Copy"
Then you can change the TrackBackground and PART_SelectionRange WIDTH to whatever you want. They were "4.0" by default for my case:
<Border x:Name="TrackBackground"
Grid.Column="1"
Width="XX.X"
Margin="0,5"
HorizontalAlignment="center"
Background="{StaticResource HorizontalSliderTrackNormalBackground}"
BorderBrush="{StaticResource VerticalSliderTrackNormalBorder}"
BorderThickness="1"
CornerRadius="1">
<Canvas Margin="-1,-6">
<Rectangle x:Name="PART_SelectionRange"
Width="XX.X"
Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"
StrokeThickness="1.0"
Visibility="Hidden" />
</Canvas>
</Border>

Blurry text in WPF even with ClearTypeHinting enabled?

I have a grid with this template and styles in WPF/XAML:
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="RenderOptions.ClearTypeHint" Value="Enabled" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter x:Name="CellContent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RenderOptions.ClearTypeHint="Enabled" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="CellContent" Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter TargetName="CellContent" Property="RenderOptions.ClearTypeHint" Value="Enabled" />
<Setter TargetName="CellContent" Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="2" BlurRadius="2" Color="Black" RenderingBias="Quality" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
The DropShadowEffect I have when you select a grid row, seems to make the text rendering blurry (gray anti-aliasing):
When I remove the drop shadow effect, it looks clear because it now uses ClearType and not gray sub-pixel anti-aliasing:
I have tried applying RenderOptions.ClearTypeHint="Enabled" to the ContentPresenter as seen above, but it does not help.
How do I force WPF to render the text that gets displayed with drop shadow effect to retain Cleartype anti-aliasing, instead of that ugly blurry gray sub-pixel anti-aliasing?
Some believe it's blurry because of the drop shadow -- this is not true. It's blurry only because ClearType is not used. This is how it looks like in Firefox when shadow AND ClearType:
ClearType enabled text is colorful -- but that blurry text is not, because it does not use ClearType -- it uses gray sub-pixel anti-aliasing and that's not how ClearType works: http://en.wikipedia.org/wiki/ClearType
The question is: how do I enable ClearType for this text?

How about setting TextOptions.TextFormattingMode to Display as well as RenderOptions.BitmapScalingMode to NearestNeighbor? The latter is new in WPF 3.5 SP1 and I normally use it to remove the blur. :)
<TextBlock Text="Hello world" TextOptions.TextFormattingMode="Display"
RenderOptions.BitmapScalingMode="NearestNeighbor"
HorizontalAlignment="Center" TextWrapping="Wrap"
VerticalAlignment="Center" Foreground="White" FontFamily="Microsoft Sans Serif">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="2" BlurRadius="2" Color="Black"
RenderingBias="Quality"/>
</TextBlock.Effect>
</TextBlock>
Below is how it looks like.
And this is how it looks like in FireFox.

The DropShadowEffect object cannot work with ClearType. This is stated on the MSDN page How to: Create Text with a Shadow:
These shadow effects do not go through the Windows Presentation
Foundation (WPF) text rendering pipeline. As a result, ClearType is
disabled when using these effects.
After all, DropShadowEffect is a bitmap effect, not a text effect.

To achieve a similar result without using an effect, you can render the text twice, once slightly offset from the other:
<Grid>
<TextBlock Text="Here is some sample text" Foreground="Black" Margin="1,1,0,0"/>
<TextBlock Text="Here is some sample text" Foreground="White"/>
</Grid>
This yields the desired result:
You could also encapsulate this into a control (called ShadowTextBlock, perhaps) so that you don't have to go repeating yourself everywhere.

What about combining the two ideas. Draw the text with DropShadowEffect, and overlay it with the same text drawn without effect, like shown in the third line here:
Still not perfect, and i find it a little bold. But perhaps something you could live with. The XAML:
<StackPanel Background="LightSteelBlue" RenderOptions.ClearTypeHint="Enabled" SnapsToDevicePixels="True" >
<Grid Margin="5">
<TextBlock Foreground="Black" Text="Here is some sample text" Margin="1"/>
<TextBlock Foreground="White" Text="Here is some sample text"/>
</Grid>
<TextBlock Margin="5" Foreground="White" Text="Here is some sample text">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="2" BlurRadius="2" Color="Black" RenderingBias="Quality"/>
</TextBlock.Effect>
</TextBlock>
<Grid Margin="5">
<TextBlock Foreground="White" Text="Here is some sample text">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="2" BlurRadius="2" Color="Black" RenderingBias="Quality"/>
</TextBlock.Effect>
</TextBlock>
<TextBlock Foreground="White" Text="Here is some sample text"/>
</Grid>
</StackPanel>

The reason this doesn't work, and the reason you won't be able to get it to work, has to do with ClearType's sensitivity to what it's rendering on top of. For ClearType to look correct it essentially needs to do per-component alpha blending. That is, a separate alpha value for red, green, and blue (normally alpha applies to all 3). What this means is that ClearType absolutely must be rendered into a bitmap that is already opaque (all alpha values are 255) (you'll notice that window title bars still have ClearType, but they use some super secret tricks to do this).
The next step to understanding this is that WPF effects first render into an off-screen bitmap, and are then combined with what's beneath (in this case, solid white, or maybe blue if it's selected).
So, the text is first rendered into a clear, transparent bitmap. Since it has no idea what will eventually be below it, it must render using grayscale instead of ClearType. Then, the effect is applied to that bitmap. Then the bitmap is drawn to where you expect it to be on-screen, and there's no chance of getting ClearType even if it's on top of a solid color with no transparency.
As a possible workaround, try using 2 copies of the text. First, apply the effect to the "lower" version of the text (by "lower" I mean it should have a lower Z-index value, and that is the case if it is "first" in the XAML). Then, draw normal text on top of it (which will get ClearType). I think this will work but I haven't tried it, and you'll probably have to experiment until you get the desired visual outcome.

I know this post is old but if anyone is having problems with blurry text, a border drop shadow could be the culprit. I have custom panels with a drop shadow and only when the panels were placed side by side was the text blurry. I found the answer from this Why everything in WPF is blurry? post. The solution for me was ecreif's answer and not the accepted answer. Add this to your control
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="NearestNeighbor"
SnapsToDevicePixels="True
RenderOptions.ClearTypeHint="Enabled"

Button how to remove border

I have a question about dat wpf buttons.
In my app I have fore example some code
<Button x:Name="SukaKnopka" VerticalAlignment="Top" HorizontalAlignment="Right" Background="Black" MaxHeight="20" MaxWidth="20" BorderBrush="Black">
<Image Source="ButtonsImages/close_btn.png" Stretch="Fill"/>
</Button>
All is fine but there is some little border around this button =( I have tryed BorderBrush="{x:Null}"
but the border again present. (This border highlights if MouseOver)

As far as I understand it, a lot of WPF controls are fully defined in their styles. So even if you specify a different border on a Button, for example; the Button's existing styles will override whatever you have specified. To overcome this, you must create a ControlTemplate.

<Button>
<Button.Resources>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
</Style>
</Button.Resources>
</Button>
This should do the trick. It will set every BorderThickness or every Border inside the button to 0.

slade is right, try modifying what you have to look more like the following and it should give you what you want.
<Button x:Name="SukaKnopka" VerticalAlignment="Top" HorizontalAlignment="Right" Background="Black" MaxHeight="20" MaxWidth="20" BorderBrush="Black">
<Button.Template>
<ControlTemplate>
<Image Source="ButtonsImages/close_btn.png" Stretch="Fill"/>
</ControlTemplate>
</Button.Template>
</Button>

Been a while since I did any "real" WPF, but does
BorderThickness="0,0,0,0"
work?