I have this in my XAML
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.4*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" >
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="Hello there and welcome!" />
</Grid>
</Grid>
</Grid>
The problem I'm facing is that the TextBlock will remain the same FontSize on all screen sizes, so when the screen is small, its easy to read but as the screen gets bigger its harder to read.
How do I keep it at a nice FontSize so it's readable from all screen sizes? Is there a way of increasing the font size as the screen expands?
You can wrap it inside the ViewBox
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Viewbox>
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="Hello there and welcome!" />
</Viewbox>
</Window>
WPF fonts are DPI aware, so they'll be the same size regardless of resolution. A viewbox will allow you to scale everything down to fit, although in my experience it typically results in everything looking too small, especially if it's been designed on a desktop and then viewed on a laptop. What I do myself is create two themes and choose the appropriate one based on physical display size (i.e. product of DPI and resolution). Not sure if it's the best solution, but so far it seems to be working.
Related
I have a little problem with AdControl.
AdControl shows ads and my PubCenter counts everything, but images are too little like this (down):
<ads:AdControl Grid.Row="2"
AutoRefreshIntervalInSeconds="60"
ApplicationId="myid"
AdUnitId="myunitid"
HorizontalAlignment="Center"
Height="80"
IsAutoRefreshEnabled="True"
VerticalAlignment="Top"
Width="400"/>
So you said you have your layout in a 3 row Grid like this;
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
</Grid>
...and you want your adverts to consume that "80" height of the 3rd row but still keep their resolution. So you could do something like this instead;
<ViewBox Grid.Row="2" Stretch="UniformToFill">
<ads:AdControl Grid.Row="2"
AutoRefreshIntervalInSeconds="60"
ApplicationId="myid"
AdUnitId="myunitid"
IsAutoRefreshEnabled="True"/>
</ViewBox>
This way it should take whatever the contents of the AdControl are and use them to fill the space you've provided (in this case, an "80" height you set in your Row Height, and whatever width of the device. With the Stretch="UniformToFill" set it should retain the resolution while filling that space and keep the same aspect ratio as whatever is provided to it.
Hope this helps, cheers.
I have a WPF application. To make the full screen visible on all screen sizes, I have implemented MinHeight, MinWidth & HorizontalAlignment="Stretch" VerticalAlignment="Stretch" in Window & Containers too. I am facing some problems when the app runs on Lower Resolution screens. The window gets cut from the right side of the screen - this doesn't show Min, Max, Close btns also on top right.
If I add layout code in then the window is proper in all resolutions, but it makes blank space above the Menubar and below end. On removing , their is no space and all is well, but right side gets cut in Low Resolution screens. And with ViewBox, space above and below the layout. My XML code is like follows :
CODE UPDATED
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- MENU BAR -->
<Menu Grid.Row="0" x:Name="myMnus" VerticalAlignment="Top" Cursor="Hand" HorizontalAlignment="Stretch" IsMainMenu="True" Grid.ColumnSpan="2">
.............
</Menu>
<ToolBarTray HorizontalAlignment="Stretch" Background="White" Margin="0,19,114,0" VerticalAlignment="Top" Grid.ColumnSpan="2" >
..............
<ToolBarTray>
<TabControl Grid.Row="1" Name="tabControl1" HorizontalAlignment="Left" Margin="0,3,0,0" VerticalAlignment="Top"
TabStripPlacement="Bottom" Grid.RowSpan="2" BorderThickness="4,25,4,1" FontSize="13">
</TabControl>
<TabControl Grid.Row="2" Name="tabControl4" HorizontalAlignment="Left" Margin="0,323,0,0" VerticalAlignment="Stretch"
TabStripPlacement="Bottom" BorderThickness="4,25,4,1" FontSize="13" Background="White" Width="227">
</TabControl>
<TabControl TabStripPlacement="Bottom" MinHeight="415" MinWidth="480" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="1" Name="tabChildContainer" Margin="227,3,207,0" BorderThickness="4,25,4,1" Grid.RowSpan="2" >
</TabControl>
</Grid>
I thought by using Stretch in HorizontalAlignment and VerticalAlignment along with MinWidth and MinHeight, that it would occupy all available space horizontally and Vertically. But tabChildContainer TabControl doesn't go to the right end corner which it should go based on the code.
This is where your problem starts:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="762.976"/>
<ColumnDefinition Width="751.024"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
Anytime that you set exact pixel sizes in your UI, you're asking for exactly these kinds of problems. Setting exact sizes for sections of your application was more of a WinForms thing... WPF has numerous controls that can resize your content for you... you're using one, the Grid... just incorrectly.
Secondly, it is very unusual to use a ViewBox on your whole UI... it is not going to help you. Your best bet is to simply remove it and all of your hard-coded dimensions and make full use of the "*" and "Auto" values in your Grid. When the controls resize themselves (or a Grid resizes them) in this way, it really doesn't matter what resolution a user is using.
I create a transparency window with different textblock but my text isn't always readable because it's depends of colors user's window.
So I want apply the same effect on a text like the effect of my title window,
It's like a white shadow.
Thank you
The best way to do this would be to use a shader effect. I tried to do this with the built in Blur effect but it seems they don't blend with Alpha.
Below is an example of how I would start and doesn't represent an end product. HLSL border effect based off of Emboss effect.
View the full image for a better understanding. This effect only adds like 2 px border so the scaling makes it look even worse.
I'm pretty bad at writing HLSL the code on the right is just copy-pasted from http://brooknovak.wordpress.com/2008/09/16/simple-image-filters-written-as-hlsl-pixel-shaders/ with modification.
I'm sure someone who knew HLSL / GLSL could write a blur effect that works correctly. Note that this effect works across a full image and thus needs to know the image size. You should put them in a constant buffer and use them instead of the hardcoded 500.0 for width and height. They need to be the width/height of the rendered object. In my example it is actually the entire left half side of the window not just the size of the text because my XAML looks like this...
<Window x:Class="WpfApplication2.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"
Loaded="Window_Loaded" Background="Transparent">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="264*" />
<ColumnDefinition Width="239*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="218*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="The quick brown fox jumped over the lazy dog." Foreground="White" Background="Transparent" Grid.RowSpan="3" x:Name="PART_TextBlock"/>
<TextBox x:Name="PART_TextBox" Grid.Column="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible" AcceptsReturn="True" AcceptsTab="True" />
<TextBlock x:Name="PART_Error" Grid.Column="1" Grid.Row="1"/>
<Button Content="Compile & Apply" Grid.Column="1" Grid.Row="2" Padding="4,1" Margin="4" HorizontalAlignment="Center" Click="Button_Click" />
</Grid>
</Window>
So I'm pretty new to WPF and I'm having trouble with the layout of my Window. Currently I have a WPF application with a Grid defined as such:
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
In the very top row, spanning two columns, I have a Menu. In the second row I have some Labels in the first column and an Image and a WindowsFormsHost in the second, finally, in the third row I have a graphing control in the second column. By default, I set the size of the Image and WFH to 570 x 413. Now, I'd like for both the Image and WFH to expand when my Window is resized such that they maintain the same relative (to the Window) size. (I actually would like the same to happen to my graphing control as well, but I can probably figure that one out if I can get the others. I cannot for the life of me figure out what setting I need to turn on/off or what I might need to bind or whatever in order to make this happen. Any help is greatly appreciated!
Thanks!
Have you tried:
<RowDefinition Height="*" />
Make sure to assign your Grid.Row within your image or control, but do not sign the controls height/width properties. The control should autosize with expansion.
Update
Did a quick test to make sure this works.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Example"/>
<Image Grid.Row="1" Source="c:\Example.jpg"/>
<Label Grid.Row="2" Content="Example2"/>
</Grid>
The image expands with the application based on the image's proportions. It does expand, but it keeps it's dimensions along with the full image in view. If you were to change the rowdefinition from ***** to Auto, you will notice that the image will expand, but it will expand past your view. Meaning you will not always see the full image.
I would suggest making a simple application like above, and playing with constraints to figure out what each does.
You need to show more information in your description, because all of the properties of the Grid and of the Image, etc. will factor into the layout.
However, you probably want to look at the HorizontalAlignment and VerticalAlignment properties of your Grid and of your Image, as well as the Stretch property of the Image. Also, you don't want to specify a fixed size for the image (you can specify a MinWidth and a MinHeight if you want them to be a certain size when starting up).
Here's a quick example that shows a grid filling a window, with a scaling image.
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Content="First Row" />
<Label Grid.Column="0" Grid.Row="1" Content="Column 0, Row 1" />
<Image Grid.Column="1" Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Source="Resources\ExamplePicture.png"
Stretch="Uniform" />
I'm fairly new to WPF and I've come across a problem that seems a bit tricky to solve. Basically I want a 4x4 grid thats scalable but keeps a square (or any other arbitrary) aspect ratio. This actually seems quite tricky to do, which surprises me because I would imagine its a reasonably common requirement.
I start with a Grid definition like this:
<Grid>
<Grid.RowDefinitions>
<Grid.RowDefinition Height="*"/>
<Grid.RowDefinition Height="*"/>
<Grid.RowDefinition Height="*"/>
<Grid.RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<Grid.ColumnDefinition Width="*"/>
<Grid.ColumnDefinition Width="*"/>
<Grid.ColumnDefinition Width="*"/>
<Grid.ColumnDefinition Width="*"/>
</Grid.ColumnDefinition>
...
</Grid>
Now if you set that to stretch, it can fill the Window or whatever container you put it in. The rows and column are uniform but the aspect ratio isn't fixed.
Then I tried putting it in a StackPanel to use the available space. Didn't help. What did get me most of the way there was when I remembered Viewboxes.
<StackPanel Orientation="Horizontal">
<Viewbox>
<Grid Height="1000" Width="1000"> <!-- this locks aspect ratio -->
<Grid.RowDefinitions>
<Grid.RowDefinition Height="*"/>
<Grid.RowDefinition Height="*"/>
<Grid.RowDefinition Height="*"/>
<Grid.RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<Grid.ColumnDefinition Width="*"/>
<Grid.ColumnDefinition Width="*"/>
<Grid.ColumnDefinition Width="*"/>
<Grid.ColumnDefinition Width="*"/>
</Grid.ColumnDefinition>
...
</Grid>
</viewbox>
<Label HorizontalAlignment="Stretch">Extra Space</Label>
</StackPanel>
Now my content scales and keeps aspect ratio. The problem is that if the window isn't wide enough some of my grid is off the screen. I'd like to be able to scroll to it if that were the case. Likewise, I might need a minimum size, which might lead to vertical scrolling too.
Now I've tried putting my StackPanel and Grid (separately) in an appropriate ScrollViewer container but then the content no longer scales to fit the window. It goes to full size, which is no good.
So how do I go about doing this? Am I barking up the wrong tree? Is there a better/easier way of doing this?
You need to put the content (the grid) inside a Viewbox and set the Viewbox.Stretch Property to Stretch.Uniform
The Viewbox control is used to stretch or scale a child element and lets you control the way the child is stretched. Check the examples here.
(source: microsoft.com)
In this instance, your best bet is a UniformGrid. This is only useful if you want NxN grids.
You need to set SizeToContent="WidthAndHeight" on the window to give you the behaviour you're after.
put 0.25* instead of * for each Column and RowWidth