The WPF GroupBox Header text font descender is always cropped. i.e. the g and p letters are cropped at the bottom. Is there a way to stop this from happening?
<Grid Grid.Row="1">
<GroupBox Header="Page Setup" Margin="10,10,10,10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
...
</GroupBox>
</Grid>
The result looks like this:
Page Setup example header text
I believe that you will only see this in Design mode like here:
Once you run it it will be fine.
Typically you can set padding attribute to move whatever element you are hosting away from the GroupBox border and header. It does not seems to do much difference in design mode unfortunately.
Related
I'm making a sort-of toolbar in WPF (StackPanel containing Buttons containing StackPanels containing Images and TextBlock...)
Here is the code for one button :
<Button x:Name="btnGraph" FontWeight="Normal" Background="{DynamicResource accentColor}" BorderBrush="{DynamicResource accentColor}">
<StackPanel>
<Image Source="Resources/diagnostic_chart1.png" Stretch="None"/>
<TextBlock HorizontalAlignment="Center" Text="Graph"/>
</StackPanel>
</Button>
As you can see, the image in the button is stretched, but the same image code outside the button (in the container StackPanel), it works correctly : image
I've tried a lot of things, but nothing worked.
Is there a way to make it works ?
EDIT: I also tried changing the DPI of images from 72 to 96, no effect.
The image doesn't look stretched to me; the size seems right. It actually looks like it's rendering across pixel boundaries, giving it a blurred appearance. Try setting UseLayoutRounding="True" on your root visual.
Imagine this. I've got a Border which contains some custom wpf control, lets call it MyControl. This Border stretches itself when window is resized (to fill available space). MyControl size is fixed. Now, I want my control to have HorizontalAlignment="Center" when it fits the available space, and HorizontalAlignment="Left" when it doesn't. I'm having trouble figuring out how to implement such behaviour though.
I guess, i can subscribe to Border's SizeChanged event and change alignment in code-behind depending on ActualWidths of Border and MyControl, but isn't there an easier way? Can this be achieved by databinding or by attached behaviour?
It will automatically behave like that if you set the control's Width and Height to fixed values and HorizontalAlignment and VerticalAlignment to Stretch instead of Center:
<Border BorderBrush="Red" BorderThickness="5">
<my:MyControl Width="200" Height="150"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Border>
I am developing a Windows Store app and I've done this before, months ago, but all of a sudden, in this new app, I can't get the image to display inside the button (properly).
<Button x:Name="ShowView" Grid.Column="1" Width="32" Height="32" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</StackPanel>
</Button>
As you can see, the code is fine (unless things have changed drastically, which by the looks of it they haven't). So what gives? This is the only code I have so far in my XAML file other than the defauls that VS generates as it's a new Project.
P.S. I've also tried taking out the StackPanel and just having Button > Image, but this produces the same result.
So, when the BUtton displays at runtime, all I can see is a very tiny, 2pixels of the image (but the image is actually 32x32pixels. How do I properly display an "Image Button"?
The problem is that your Width and Height for the button are far too small. You've made it 32x32 pixels, but the button will use almost all of that itself for the space it leaves around the visible border, the border itself, and the padding between the border and the button's content.
(It leaves space around the edge to provide a larger hit target than the visible appearance. This is useful on touchscreens, where accurate finger placement is difficult.)
All that's left for your image is a few pixels.
You'll need to make the button about 62x52 pixels to leave enough space in the middle for a 32x32 pixel bitmap.
You could get away with a slightly smaller button if you explicitly set smaller Margin and Padding properties, although as mentioned above, the margin is there for a reason.
You have a couple options, the Padding property for instance is Template bound with some pre-set padding added to it. So with your Button having a fixed Height and Width set to 32 something as simple as setting Padding="0" could fix it for you depending on the actual size of your Image.
If worse comes to worse though, you could always just make your own Button Template. There's a couple easy ways to do this. One of which would be just go make a copy of the default Button Template, rip out all the Padding/Margin/Height/Width crap preset in there and just change its name then apply your new template directly to your button like;
<Button x:Name="ShowView" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33"
Style="{StaticResource YourCustomButtonTemplateForImages}">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png"/>
</Button>
Or... another option would be, embed your Image inside of a ViewBox inside your button and it will fit and re-scale itself accordingly to its set available size.
Oh, you might also want to make your Background="Transparent" while you're at it to make it look a little cleaner as just an image.
Hope this helps.
i am currently working on a sample for a lib that i wrote,designed to execute WebRequests such as POST and GET safely. At the moment i am trying to figure out a way to show the response of the request (Usually, HTML text) in my window.
It does not need to be fancy,but i thought about a Textblock that can scroll,but i can't seem to make mine works.
Here is what i am trying:
<ScrollViewer Height="439" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="546,19,0,0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Name="Scroller">
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="100" Width="433"
TextWrapping="Wrap" Name="block" Height="440" />
</ScrollViewer>
What happens is that my content scrolls,but it does not appears fully in the window,it gets cut for some reason and i can't see all of the return.
Any other advice of how to do it ?
Thanks !
The Height of the TextBlock is fixed at 440. You should remove that.
You have way too many hard-coded sizes, remove the Width and Height of the TextBlock. If you want it to scroll you need to allow it to take all the space it wants.
Your scrollviewer is handling the scrolling and that is what requires the fixed height, as #Erno said the TextBlock within is also fixed height and it shouldn't be.
The content within the ScrollViewer should be as high as it needs to be, the ScrollViewer will handle the scrolling of that based on it's own height.
My TextBlock has for example 50x50 pixels to display text, however if there is more text, I want a user to be able to scroll. Is there an autoscroll feature for this control?
Should I use a different control better suited for this task?
Here's a couple of pics to illustrate the problem:
This one works fine because the text fits in snugly:
This one doesn't seem correct. Text is cut off.
Just in case someone comes into the same problem. Just wrap the textBlock with a control. Works like a charm!
<ScrollViewer Background="Black">
<TextBlock x:Name="textBlockBackStory"
FontSize="12"
Foreground="Orange"
TextWrapping="Wrap"
Background="Black"
TextDecorations="None">
Backstory here.
</TextBlock>
</ScrollViewer>
You can put your textblock inside a ViewBox, so the font will adjust to display the entire text.