I created a custom control similar to TabControl. It works nice, except that the text in header items gets blury when I resize the content. It can, for example look like this:
Not only the text, but the box around the text can also get non-vertical. See the blue border around the "General" item:
What is causing this problem? I have set SnapToDevicePixels = True.
Thanks for any ideas!
EDIT:
I'm using .NET 4.0. TextOptions.TextFormattingMode is set to "Display".
The whole problem with fuzzy text and background occurs if I apply a DropShadowEffect effect in the style for ItemsControl which displays the buttons. This is the code for the Effect:
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Direction="0" ShadowDepth="1" BlurRadius="10" Opacity="0.2" Color="Black" />
</Setter.Value>
</Setter>
If this code is not enabled, the the text and the borders get displayed nicely.
I suspect you've said it yourself: SnapToDevicePixels will ruin text rendering if you've resized the text so it displays across pixels. You probably want to keep SnapToDevicePixels="True" on your borders/backgrounds, but turn it off for the text elements.
As for your border... can you post the xaml? I'm guessing that you're not using just a single element with rounded corners - are you drawing the edge of that tab as three separate lines?
There are 2 things to consider:
are you using .NET 3.5 or .NET 4.0? reason why I'm asking is that the text rendering has been changed between the versions. In 4.0 it's a lot better.
Sometime you have to wait a little while until the text get's sharper, so you scroll around, and then after a second the text becomes sharper. That could be as well a reason for you're issue.
Related
I'm using the Microsoft Ribbon for WPF October 2010 and have got 3 buttons next to each other, inside a RibbonControlGroup. The left and the right ones are text-only RibbonToggleButton controls, the one in the middle is an image-only RibbonButton. The buttons have a defined width to match the row above.
My code:
<r:RibbonControlGroup>
<r:RibbonToggleButton Width="110" Label="Outgoing" IsChecked="True" />
<!-- Padding and Height set to align the buttons/image -->
<r:RibbonButton Width="30" Padding="5 0" Height="24" SmallImageSource="Images\Small\arrow_swap.png" />
<r:RibbonToggleButton Width="110" Label="Incoming" />
</r:RibbonControlGroup>
The problem is that as soon as I apply the SmallImageSource to the middle button, the other two get spacings for images, causing the text not to be centered anymore. That is problem (1).
Because I didn't find a quick solution, I tried to add the image of the middle button not via SmallImageSource, but by adding it as <Image> for the content of the button. However, the button would remain empty. That is problem (2).
My third solution was to add images to the left and the right button, too. Unfortunately there is nearly no margin between the image and text, which looks quite ugly. I tried several things to enlarge the margin like adding a <Style TargetType="Image"> to the <RibbonToggleButton.Resources>, but although the editor accepts it and displays the spacing at designtime, the margin is gone again at runtime. That is problem (3).
Does anybody have an appropiate solution to any of the three problems? I cannot get it to work. The number of the problems is also the preference of the alternatives, (1) being the most favourite to use with an appropiate hack.
It seems you cannot do that. Its by design.
As per MSDN (here about half way down the page):
Related ribbon controls can be grouped together in a RibbonControlGroup. When a control group is resized, one RibbonControlSizeDefinition is applied to all of the controls in the RibbonControlGroup. The RibbonControlGroup is positioned in the RibbonGroup as if it were one control.
All the controls in a RibbonControlGroup shares the same RibbonControlSizeDefinition. Hence, in your case image will be added for all the buttons.
You may use RibbonGroup instead if you do not want to glue all your controls very closely. This way you can customize each button container by using different RibbonControlSizeDefinitions.
Ok, I've created a PNG-24 with transparency. It's basically a grayscale image that uses 'colors' in between black and transparent instead of black and white. I did this so I can use this as the Opacity Mask of a colored rectangle, thus rendering the image in whatever color I want using only a single graphic.
However, for the life of me, I can't get WPF to stop anti-aliasing the da*n image!!
I've set 'SnapesToDevicePixels' on the rectangle to which the brush is applied... I've set the ImageBrush's Scale to 'None'... I've set its ViewPort and the ViewBox to absolute units and sized them exactly to the source image. But no matter what I try, WPF still insists on trying to smooth things out! This is VERY frustrating!!!
So... anyone know how to use an image as an opacity mask but not lose the pixel-precise drawing that we have done? I just want WPF to render the damn thing as we drew it, period!
I have tried to reproduce your problem. Simply like this:
<Rectangle Width="200" Height="200" Fill="Red">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/mask.png"/>
</Rectangle.OpacityMask>
</Rectangle>
mask.png contains a simple diagonal mask, like that half of rectange is visible and other half is 100% transparent.
And recrangle is rendering pixel perfect (and aliased, as you want).
I think, that you may a DPI setting, that is not native to your monitor, and WPF just can`t render images correctly.
GOT IT! It's a layout issue that for some reason, there's no easy way to change. However, there's a value you can set called UseLayoutRounding that fixes it. I just set it at the root level (for this fauxample, a grid...)
<Grid UseLayoutRounding="True">
....
</Grid>
...and BAM! Works like a charm! "Sort of" like a 'SnapsToDevicePixels' but for positioning of elements (i.e. it rounds all layout-related values like left, width, etc. whereas SnapsToDevicePixels snaps the layout to the on-screen pixels when rendering.)
M
I'd like the ability to have something that looks like a border but I don't
want the bottom to show. in CSS I could accomplish this by going border-style-bottom:none
I'm wondering if Silverlight has a similar functionality for the Border control.
If not, I'm wondering what other control I can use to accomplish this? thanks
It works like this:-
<Border BorderBrush="Black" BorderThickness="2,2,2,0">
...
</Border>
Another form just takes two numbers "lr,tb" which specifies the thickness of the left and right of the border then the top and bottom of the border.
Here are two screenshots:
A full-glass window over white background:
http://trotsenko.com.ua/stackoverflow/2010_01_13%20Glass%20Window%20over%20a%20white%20background.png
The same full-glass window over back background:
http://trotsenko.com.ua/stackoverflow/2010_01_13%20The%20same%20Glass%20Window%20over%20a%20Black%20background.png
The question is: in WPF, how do I use TextBlock so that it will be readable on the glass?
I already tried
<DropShadowEffect ShadowDepth="0" BlurRadius="20" Color="White"/> with no acceptable success. (Maybe I did smth wrong ?)
I didn't succeed with <OuterGlowBitmapEffect/> (I think, because bitmap effects are now deprecated. Did I do smth wrong?)
I think you could use the native DrawThemeTextEx() method in dwmapi.dll, but I don't know how to do this in WPF. All examples I found were using WinForms.
I have a long text and show first sentence in a TextBlock.
I wish by clicking the TextBlock or a button to show a panel below the TextBlock with full text. I wish this panel be absolutely positioned and be displayed above any other elements, you can do a similar thing in HTML showing and hiding absolutely positioned 'div' element.
How to do this in WPF?
Thank you for any suggestions.
AdornerLayer can work, but may be a little complex. Other options include using PopUps or ToolTips -- you should look into those first as your easiest options.
If these all don't work, it'll really depends on what kind of panel you're using. For example, if you're using a Canvas, all you have to do is make sure to set the correct ZIndex on the element.
In order to make this more robust, I'd suggest the following:
<!-- Set Panel.ZIndex="99" when showing hidden area to ensure top placement -->
<Grid>
<TextBlock>This is my primary bit of text ...</TextBlock>
<!-- Canvas stays hidden until we want to show the rest of the text -->
<Canvas Visibility="Hidden">
<TextBlock Canvas.Bottom="-10">Content goes here</TextBlock>
</Canvas>
</Grid>
Put the long text in an AdornerLayer is the best option. Check out some links
http://msdn.microsoft.com/en-us/library/ms743737.aspx
http://wangmo.wordpress.com/2008/10/19/relations-between-adorner-adornerlayer-and-adornerdecorator/