I have a problem trying to adjust the size of TextBlocks. I have a grid with 3 columns and 6 rows, in the second column I have a TextBlock in each row, each TextBlock text has different length so when I resize the window some texts looks larger or smaller than the others.
Is there a way to have the same scale in each TextBlock when I resize the window? I would like all the TextBlock look the same size when I resize the window.
This is the code I have:
<Grid Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="1">
<TextBlock x:Name="txt1" Text="Some long text 12345" FontSize="20" />
</Viewbox>
<Viewbox Grid.Column="1" Grid.Row="1">
<TextBlock x:Name="txt2" Text="Some longer text 1234567890" FontSize="20" />
</Viewbox>
<Viewbox Grid.Column="1" Grid.Row="2">
<TextBlock x:Name="txt3" Text="Text3" FontSize="20" />
</Viewbox>
<Viewbox Grid.Column="1" Grid.Row="3">
<TextBlock x:Name="txt4" Text="Text4" FontSize="20" />
</Viewbox>
<Viewbox Grid.Column="1" Grid.Row="4">
<TextBlock x:Name="txt5" Text="Text5" FontSize="20" />
</Viewbox>
<Viewbox Grid.Column="1" Grid.Row="5">
<TextBlock x:Name="txt6" Text="Text6" FontSize="20" />
</Viewbox>
Thanks in advance,
Alberto
Place the TextBlock directly in the gird, no need of viewBox
Set instead of *
There is one more option you can set in ColumnDefination or RowDefination "SharedSizeGroup"
the rows or columns with same name will share the same height or width
Related
the code below is a small snippet of a big wpf Window I am using in my Project. It produces the linked wpf Window.
I am wondering why my last grid column is so wide. I am expecting that the width of the last column depends on the width of the button, because the column width is set to "Auto".
If I remove the columnspan of the StackPanel the column width will be correct but then the CheckBoxes are not aligned to right side.
I hope you have understood my problem. My aim is, that the last column is as small as possible, the checkboxes are at the right side and the rest stays at it is.
Because this snippet is part of a bigger wpf window I cannot remove any grid rows or columns.
Thank you very much for your help.
Best regards.
WPF Window
<Window x:Class="TestProject.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
d:DesignHeight="152.429" d:DesignWidth="403">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Grid.Row="0"
Margin="5"
Grid.ColumnSpan="2"/>
<Button Grid.Column="2"
Grid.Row="0"
Margin="5"
Width="40"/>
<ComboBox Grid.Column="0"
Grid.Row="1"
Margin="5"
Grid.ColumnSpan="3"/>
<Image Grid.Column="0"
Grid.Row="2"/>
<StackPanel Grid.Column="1"
Grid.Row="2"
Grid.ColumnSpan="2">
<CheckBox Margin="5"
Content="checkbox content 1"/>
<CheckBox Margin="5,0,5,5"
Content="checkbox content 2"/>
</StackPanel>
</Grid>
You can put a grid inside another grid.
Here is the code that will help you achieve your goal.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0"
Grid.Row="0"
Margin="5"
Grid.ColumnSpan="2"/>
<Button Grid.Column="2"
Grid.Row="0"
Margin="5"
Width="40"/>
<ComboBox Grid.Column="0"
Grid.Row="1"
Margin="5"
Grid.ColumnSpan="3"/>
<Grid Name="GridInsideAGrid"
Grid.Column="0"
Grid.Row="2"
Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" />
<StackPanel Grid.Column="1">
<CheckBox Margin="5"
Content="checkbox content 1"/>
<CheckBox Margin="5,0,5,5"
Content="checkbox content 2"/>
</StackPanel>
</Grid>
</Grid>
I'm developing a resolution independent application in WPF. I am using mahapps metro controls in my application. I have a grid which is divided into rows and columns in * and 4 TextBoxes are occupying specific rows and columns in that grid.
The problem is that the TextBox is not occupying the row as in the bottom border of
Textbox is not visible but when I change style to x:Null the problem disappears. Is this a problem specific to metro TextBox?. I tried VerticalAlignment = "Stretch" but this does'nt help.
Also the bottom part is visible in higher resolution like 1440 X 900 but not in 1366 X 768. What am I missing?
<Grid Background="Azure">
<Grid.RowDefinitions>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="13.1578*"/>
<RowDefinition Height="4.8157*"/>
<RowDefinition Height="18.4210*"/>
<RowDefinition Height="4.8157*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="90*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0"
Grid.RowSpan="12"
Grid.Column="0"
Grid.ColumnSpan="3">
<Border BorderBrush="Black"
BorderThickness="1"/>
</Grid>
<TextBox x:Name="txt_1"
Controls:TextBoxHelper.Watermark="Textbox 1"
Style="{x:Null}"
Grid.Row="2"
Grid.Column="1"/>
<TextBox x:Name="txt_2"
Controls:TextBoxHelper.Watermark="Textbox 2"
Style="{x:Null}"
TextWrapping="Wrap"
Grid.Row="4"
Grid.Column="1"/>
<TextBox x:Name="txt_3"
Controls:TextBoxHelper.Watermark="Textbox 3"
Style="{x:Null}"
TextWrapping="Wrap"
Grid.Row="6"
Grid.Column="1"/>
<TextBox x:Name="txt_4"
Controls:TextBoxHelper.Watermark="Textbox 4"
VerticalAlignment="Stretch"
TextWrapping="Wrap"
Grid.Row="8"
Grid.Column="1"/>
<Grid Grid.Row="10"
Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32.5*"/>
<ColumnDefinition Width="35*"/>
<ColumnDefinition Width="32.5*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btn_add"
Content="Add"
Grid.Row="8"
Grid.Column="1"
Click="btn_add_Click"/>
</Grid>
<StackPanel Background="#C0F368"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3">
</Grid>`
I have a Group Box that contain a Stack Panel that contains a Combo Box (A) and a Text Box. And I have another Stack Panel (B) that contains a combo Box and a Label.
I would place the Combo Box B on the same level as Combo Box A (same y) using xaml code.
Please note that the GroupBox and and the Stack Panel(B) are placed in a grid in the same row, different columns.
I'm trying to bind the y coordinate of the Combo Box (B) to the y coordinate of the Combo Box (A).
Where I can find the coordinates info of wpf controls in the Visual Studio properties window ?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<GroupBox Name="AGroupBox" Grid.Row="1" Grid.Column="0" >
<GroupBox.Header>
<Label Content="GroupBox" FontWeight="Bold" />
</GroupBox.Header>
<StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal">
<ComboBox x:Name="ComboBoxA" Width="100" Height="25" VerticalAlignment="Center"/>
<TextBlock x:Name="TextBlockA" Width="150" VerticalAlignment="Center" Margin="10,0,0,0" Text="This a Test" />
</StackPanel>
</GroupBox>
<StackPanel Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left">
<Label x:Name="LabelB" Content="LabelB" />
<ComboBox x:Name="ComboBoxB" Width="150" Height="25"/>
</StackPanel>
</Grid>
a close equivalent of using y-coordinate would be using Margin property ... but it is going to break after the first resize attempt.
i think, it is possible to update Margin on resizes, but i would start with a more complex layout, like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--additional Grid used to position comboBoxes on the same height-->
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!--group box is used as cover for the 1st column-->
<GroupBox Name="AGroupBox"
Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" >
<GroupBox.Header>
<Label Content="GroupBox" FontWeight="Bold" />
</GroupBox.Header>
</GroupBox>
<!--stack panel with ComboBoxA is centered vertically in the 1st column-->
<StackPanel Grid.Row="1" Grid.Column="0"
Margin="5,0"
Orientation="Horizontal">
<ComboBox x:Name="ComboBoxA" Width="100" Height="25" VerticalAlignment="Center"/>
<TextBlock x:Name="TextBlockA" Width="150" VerticalAlignment="Center" Margin="10,0,0,0" Text="This a Test" />
</StackPanel>
<!--ComboBoxB is centered vertically in the 2nd column-->
<ComboBox x:Name="ComboBoxB"
Grid.Row="1" Grid.Column="1"
VerticalAlignment="Top" HorizontalAlignment="Left"
Width="150" Height="25"/>
<!--Label attached on top of ComboBoxB-->
<Label x:Name="LabelB" Content="LabelB"
Grid.Row="0" Grid.Column="1" VerticalAlignment="Bottom"/>
</Grid>
</Grid>
I have the following code of XAML in WPF. This generates the grid with equal size of columns & rows (as shown in figure 1.)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="A" Background="Green"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="AB" Background="Red"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="ABC" Background="Blue"/>
<TextBlock Grid.Row="3" Grid.Column="3" Text="ABCD" Background="Yellow"/>
</Grid>
Figure 1.
But when I put this grid in a viewbox (like the code below), the rows & column remains no more equally in size (as shown in figure 2.).
<Viewbox Stretch="Uniform">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="A" Background="Green"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="AB" Background="Red"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="ABC" Background="Blue"/>
<TextBlock Grid.Row="3" Grid.Column="3" Text="ABCD" Background="Yellow"/>
</Grid>
</Viewbox>
Figure 2.
How can I make this grid with equal size of rows & column inside a viewbox?
You can enforce size-sharing like this:
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="B"/>
<ColumnDefinition SharedSizeGroup="B"/>
</Grid.ColumnDefinitions>
That's the behavior of ViewBox
Taken from internet
The ViewBox is a very useful control in WPF. If does nothing more than
scale to fit the content to the available size. It does not resize the
content, but it transforms it.
why use viewbox when you don't want this, try another control.
Instead of using a Grid try using a UniformGrid:
<Viewbox Stretch="Uniform">
<UniformGrid Rows="4" Columns="4">
<TextBlock Grid.Row="0" Grid.Column="0" Text="A" Background="Green"/>
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock Grid.Row="1" Grid.Column="1" Text="AB" Background="Red"/>
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock Grid.Row="2" Grid.Column="2" Text="ABC" Background="Blue"/>
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock />
<TextBlock Grid.Row="3" Grid.Column="3" Text="ABCD" Background="Yellow"/>
</UniformGrid>
</Viewbox>
Just make sure you set Rows And Columns, and instead of saying which row/column each child element is, you just enter them in order.
How can i make Scroll in the Items resides in the Canvas.There is listbox inside the canvas which contains DataTemplate with the control image and textblock and I am using the following code but it was not worked.
<ScrollViewer x:Name="scvImages" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0" Grid.Row="1"
HorizontalContentAlignment="Stretch" Height="Auto" Width="Auto">
<Canvas x:Name="canvas" Grid.Row="1" Visibility="Visible" Background="Black" Opacity="0.7" Grid.RowSpan="2">
<ListBox x:Name="lstcountry" Margin="0,50,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="content" Height="70" Width="480">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image x:Name="img" Source="{Binding Path=img}" Grid.Row="0" Grid.Column="0" Margin="20,0,0,0" Height="70" Width="150"></Image>
<TextBlock x:Name="countryname" Text="{Binding Path=short_name}" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Height="70" Padding="0,15,0,0" Margin="15,0,0,0" FontSize="32" FontFamily="The Times of Roman"></TextBlock>
<Border x:Name="brd1" BorderBrush="White" BorderThickness="0,2,0,2" Grid.ColumnSpan="2" ></Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Canvas>
</ScrollViewer>
First thing to enable scrolling in scrollviewer change height Auto to some definite height
<ListBox x:Name="lstcountry" Margin="0,0,0,0" Height="300">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="content" Height="70" Width="480">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image x:Name="img" Source="{Binding Path=img}" Grid.Row="0" Grid.Column="0" Margin="20,0,0,0" Height="70" Width="150"></Image>
<TextBlock x:Name="countryname" Text="{Binding Path=short_name}" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Height="70" Padding="0,15,0,0" Margin="15,0,0,0" FontSize="32" FontFamily="The Times of Roman"></TextBlock>
<Border x:Name="brd1" BorderBrush="White" BorderThickness="0,2,0,2" Grid.ColumnSpan="2" ></Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Canvas>
</ScrollViewer>
But i suggest you to remove scrollviewer and canvas control from your layout. because both are usefulness. If i guess right you need scrolling in your ListBox control and The Listbox control has it's own scroll implementation. You should remove height property from listbox if you define height of grid's 1st row like
<RowDefination Height="*"/>
or
<RowDefination Height="400"/>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="content" Height="70" Width="480">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image x:Name="img" Source="{Binding Path=img}" Grid.Row="0" Grid.Column="0" Margin="20,0,0,0" Height="70" Width="150"></Image>
<TextBlock x:Name="countryname" Text="{Binding Path=short_name}" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Height="70" Padding="0,15,0,0" Margin="15,0,0,0" FontSize="32" FontFamily="The Times of Roman"></TextBlock>
<Border x:Name="brd1" BorderBrush="White" BorderThickness="0,2,0,2" Grid.ColumnSpan="2" ></Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Don't use Auto for ScrollViewer. Auto stretches the ScrollViewer same size as canvas. You need to set fixed height so content can be scrolled within it.
The list box control has it's own scroll implementation. Unless you are going to have other elements along side the list box, I would remove the scroll viewer and canvas elements.