I tried to google it out, but is there any sample Shader effect which I could use to produce an outlined FormattedText. I was able to get the outline by using BuildGeometry(), but the performance is very poor!
PS: Since I'm new to this and still learning, it would be helpful if anyone can suggest whether it would be even possible or not.
Here's an easy option I whipped up, but not sure if it's exactly what you want. Just use an OuterGlowBitmapEffect.
You can paste my example straight into Kaxaml to see what it looks like:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Background="Black">
<TextBlock FontFamily="Arial" FontSize="36" FontWeight="Bold" Text="Text" Foreground="White">
<TextBlock.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="Orange" GlowSize="6" />
</TextBlock.BitmapEffect>
</TextBlock>
</Grid>
</Page>
Related
Considering the following xaml.
<Window x:Class="PlayTabControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary>
<Color x:Key="HintColor" A="255" R="0" G="0" B="0"></Color>
<SolidColorBrush x:Key="HintColorBrush" Color="{DynamicResource HintColor}" Opacity="0.26"/>
</ResourceDictionary>
</Window.Resources>
<StackPanel Background="White">
<TextBlock FontSize="28" FontWeight="ExtraBlack"
Text="Hello World, #42000000"
Foreground="#42000000"
HorizontalAlignment="Center"/>
<TextBlock FontSize="28" FontWeight="ExtraBlack"
Foreground="{StaticResource HintColorBrush}"
Text="Hello World, HintColorBrush # 0.26"
HorizontalAlignment="Center"/>
<TextBlock FontSize="28" FontWeight="ExtraBlack"
Text="Hello World, #68000000"
Foreground="#68000000"
HorizontalAlignment="Center"/>
<TextBlock FontSize="28" FontWeight="ExtraBlack"
Foreground="Black"
Opacity="0.26"
Text="Hello World, Black TB#0.26"
HorizontalAlignment="Center"/>
<TextBlock FontSize="28" FontWeight="ExtraBlack"
Foreground="#FFbdbdbd"
Text="Hello World, #FFbdbdbd"
HorizontalAlignment="Center"/>
</StackPanel>
</Window>
It produces the following result:
The observation to take from this is that Line1 and Line2 are of different colour. Line 3 is visually correct but numerically incorrect in terms of its colour input.
Here is what is done to each line of Textblock.
Hard code Foreground colour of #42000000. This is approximately 26% opacity. Result: Incorrect
Brush resource of opacity of 0.26 with the color set to Black effectively. Result: Incorrect
The corrected numeric to produce the same perceived output. Which is in theory 40.6% opacity.
Using the Textblock's Opacity 0.26. Result: Correct
Hard coded colour of #FFbdbdbd, no transparency involved. Result: Correct
My question is: What/Why is wpf rendering this differently? This makes it difficult to reliably do colour styling when transparency is concern from a designer's sample/screenshot.
Note that out of curiosity, I have done this on a Windows store app as well. And the result is what I would expect, all the colours are the same except Line3 which will now be darker as it is more opaque.
If anyone has stumbled into this issue as well, it seems that setting TextOptions.TextFormattingMode to Display seems to fix the issue (you can set this at Window level so it affects all content). This does change the text rendering layout a bit though, so take that into consideration. See this for a bit more info on what's the difference.
I'm designing a WPF application, and I wanted it to have a customized left menu. Actually I would like the left menu to look like on the image:
I know this has something to do with overriding the template, but I'm not sure how to draw that shape. Any suggestions please?
well i don't know if this is what you want but try this code:
<WrapPanel>
<Rectangle Width="50" HorizontalAlignment="Left" Height="200" Fill="Aqua"/>
<Border CornerRadius="0,100,100,0" Width="50" HorizontalAlignment="Left" Height="200" Background="Aqua"/>
</WrapPanel>
this can be done by Combining shapes in WPF. Take a look at this tutorial.
In Silverlight 4 application there are few images, both are displayed correctly in design mode, one is displayed correctly in run-time also:
<Image Height="180" Width="149" Source="../Picts/Field.png" />
Another one is not displayed in run-time:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5" Visibility="{Binding SquadSavedVisibility, Mode=OneWay}">
<Image Source="..\Picts\ok.png" Width="16" Height="16" />
<TextBlock Text=" It is saved" Foreground="Green"/>
</StackPanel>
Why? And how to get it displayed?
Any thoughts are welcome. Thanks.
It's all in your slashes, VS Design time doesn't mind you using "..\Picts\ok.png", but Silverlight runtime wants to see "../Picts/ok.png". In other words, your slashes matter.
I had a similar problem with images showing in design-time, but not at runtime. Mine was using a pack URI so I wanted to post that fix as well:
Does not work at runtime, does work at design-time:
<Image Source="mydllname;component/Images/logo.png" />
Works at both design and runtime:
<Image Source="/mydllName;component/Images/logo.png" />
Note the extra '/' before the Pack URI starts.
You can try to hook into the Image.ImageFailed Event. For examples and more explanation you look into this page:
http://msdn.microsoft.com/en-us/library/system.windows.controls.image.imagefailed%28v=VS.95%29.aspx
I'm curious if anyone knows of a way to easily get a double border effect in WPF similar to what you see in the selected items in Windows Explorer in Windows 7.
If you look closely, you'll notice that the selected item has a dark border, a lighter, inner-border, and then a gradient background.
Currently, I'm using two borders around an object any time I want to achieve this effect. Doing it that way is ugly syntactically and really muddies my view xaml. Being a web developer at heart I'd like to separate the xaml structure from the style as much as possible. So, I've started putting this into Styles and Content Templates in order to pull it out of my view xaml.
However, I'm curious if there may be a better way to go about this.
I played around for a while using a VisualBrush as a background to try to get the effect. However, I want to be able to apply the background to elements that can be any size and the way the VisualBrush stretched the visual to fit the element background didn't work the way I wanted it to. Essentially, I'd really just like it to stretch the visual the way the WPF layout system would do it.
Any ideas would be greatly appreciated.
--
Dusty
A VisualBrush is probably not what you want to do in this scenario, as it's pretty heavy.
You can solve the problem with some Xaml without nesting borders.
For example,
<Border BorderBrush="#FF00B5C5" BorderThickness="1" CornerRadius="2" Background="White">
<Grid Background="#FF00B5C5" Margin="1">
<Rectangle Fill="#FFA2F2FE" />
<TextBlock Text="This is some text" VerticalAlignment="Center"/>
</Grid>
</Border>
You can, of course, tweak the properties to get the look you need.
EDIT: If you want to create a style, so you can reskin the look-and-feel, you can do something like this:
<Window.Resources>
<Style x:Key="BorderedTextBlock" TargetType="ContentControl">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Border BorderBrush="#FF00B5C5" BorderThickness="1" CornerRadius="2" Background="White">
<Grid Background="#FF00B5C5" Margin="1">
<Rectangle Fill="#FFA2F2FE" />
<TextBlock Text="{Binding}" VerticalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<ContentControl Style="{StaticResource BorderedTextBlock}" Content="This is some text" Width="200" Height="24"/>
</Grid>
Additionally, turn this into a custom control with all the styling and theming parameters that you need.
Hope that helps,
Sergio
I am using Avalon in my WPF app. I want a window similar to that of Visual Studio, Tools on the left, then the documents in the middle and the Properties on the right. I managed to do that with this code:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ad="clr-namespace:AvalonDock;assembly=AvalonDock"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1" Height="600" Width="800">
<Grid>
<ad:DockingManager x:Name="dockManager" RenderTransformOrigin="0,0">
<ad:ResizingPanel Orientation="Vertical">
<ad:ResizingPanel Orientation="Horizontal" >
<ad:DockablePane>
<ad:DockableContent Title="Toolbox" Width="100">
<TextBox />
</ad:DockableContent>
</ad:DockablePane>
<ad:DocumentPane x:Name="documentsHost" OverridesDefaultStyle="True">
<ad:DocumentContent Title="File1.doc">
<RichTextBox/>
</ad:DocumentContent >
<ad:DocumentContent Title="File2.doc">
<RichTextBox/>
</ad:DocumentContent >
</ad:DocumentPane>
<ad:DockablePane>
<ad:DockableContent Title="Project Explorer">
<TextBox />
</ad:DockableContent>
</ad:DockablePane>
</ad:ResizingPanel>
<ad:DockablePane>
<ad:DockableContent Title="Output">
<TextBox />
</ad:DockableContent>
</ad:DockablePane>
</ad:ResizingPanel>
</ad:DockingManager>
</Grid>
</Window>
The problem is that when I resize any of them, they all resize to keep their proportion. This is not what I want, I want it to be like VS where just the document window in the middle resizes with.
I would appreciate any help since I have been fighting with this for a few days now :(
Funny, because I started with the Avalon Tutorial from there and replaced the contents for the window with your XAML (very similar by the way). And the problem you describe does not happen.
Then I realized that the tutorial uses AvalonDock 1.1.1692, while the latest release is 1.1.2691 and has the behaviour you describe.
A look at the source code shows an attached property defined by ResizingPanel called ResizeWidth, which is 1* by default => the auto resize.
If you change the first DockablePane like this:
<ad:DockablePane ad:ResizingPanel.ResizeWidth="100" >
You get the behaviour you wanted.
It's never great to use hard-coded widths, so I changed it to
<ad:DockablePane ad:ResizingPanel.ResizeWidth="{Binding ElementName=dc, Path=Width}" >
after naming the inner DockableContent dc