Cannot give responsive layout to controls - wpf

I'm trying to get a responsive layout to the window layout, essentially I've three columns and three rows, this is the organization:
1rst column
there are all the information of team A, that's the shield and the latest matches under "Performance"
2rst column
there are all the latest matches disputed between team A and B
3rst column
the same of 1rst column but about on team B
Now for make this predisposition I wrote this code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!-- Scudetto shield home -->
<Grid Grid.Row="0" Grid.Column="0">
<Image />
</Grid>
<!-- Performance -->
<Grid Grid.Row="1" Grid.Column="0">
<Viewbox Stretch="Uniform" VerticalAlignment="Bottom">
<TextBlock Text="Performance" />
</Viewbox>
<!--<Label HorizontalAlignment="Center" VerticalAlignment="Bottom">Performance</Label>-->
</Grid>
<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1" Grid.RowSpan="3">
<Label HorizontalAlignment="Center">Latest matches</Label>
<TextBox />
<TextBox Margin="0,5,0,0" />
<TextBox Margin="0,5,0,0" />
<TextBox Margin="0,5,0,0" />
<TextBox Margin="0,5,0,0" />
</StackPanel>
<!--shield away -->
<Grid Grid.Row="0" Grid.Column="2">
<Image />
</Grid>
<!-- Performance -->
<Grid Grid.Row="1" Grid.Column="2">
<Label HorizontalAlignment="Center" VerticalAlignment="Bottom">Performance</Label>
</Grid>
</Grid>
the problems are these:
I want to enlarge the font of performance label when the user resize the window, actually I've inserted two situation, one that working bad with viewbox (if you try I've the text too large when the window is to minimum res), and the second situation with a simple label for team B that essentially not working
The latest matches of the second column it's not responsive, I need to fit the textbox to height and width, actually working only the width. For the height I mean the space between each textbox that for now is setted as margin.
The third column is the same as the first
What I can do for fix this?

Related

Avoid WPF statusbar gets totally collapsed when window gets resized vertically to a smaller size

I have below WPF window which contains a dockpanel as main container. Then I place a main grid at the top (which contains some other grids) and a statusbar at the bottom.
<Window>
<DockPanel>
<Grid DockPanel.Dock="Top">
<!-- Grid stuff here -->
</Grid>
<StatusBar DockPanel.Dock="Bottom"
VerticalAlignment="Bottom">
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem Grid.Column="0">
<TextBlock Text="Item1"/>
</StatusBarItem>
<Separator Grid.Column="1" />
<StatusBarItem Grid.Column="2">
<TextBlock />
</StatusBarItem>
<Separator Grid.Column="3" />
<StatusBarItem Grid.Column="4">
<TextBlock Text="AnotherItem" />
</StatusBarItem>
</DockPanel>
</Window>
I have below problem:
When window is resized vertically to a smaller size, there comes a moment in which statusbar height is reduced and even completely collapsed. So how to avoid this? I want statusbar never gets collapsed and keep all the time its height.
Grids within Grids are so hot right now.
<Window x:Class="GridRoot.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Border BorderBrush="Black" BorderThickness="10" Background="CornflowerBlue">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
Hello!
</TextBlock>
</Border>
</Grid>
<StatusBar Grid.Row="1">
<StatusBarItem>
<TextBlock>
GET OFF ME!
</TextBlock>
</StatusBarItem>
</StatusBar>
</Grid>
</Window>
The top row takes up as much space is available, and the bottom row takes up as much space as its content desires. Since the StatusBar control pretty much has a set height, it will always stay visible on the bottom.
Some folks might have issue with putting a Grid inside another Grid, but there's absolutely no reason not to.
The above example, tiny
and embiggened

WPF Grid - Shrink one column on window resize to keep all content on screen

I have a 5 column grid in WPF which displays some dynamic data. Columns 1,2 and 4 are fixed width as they are effectively labels, but 2 and 5 can be of different lengths.
Column 3 should wrap to make sure all content is shown but can expand to a maximum width of 390. But column 5 should remain on a single line. When I resize the window, everything must remain on screen without a horizontal scrollbar. The middle (3rd) column should shrink down to keep the 4th and 5th columns on screen.
Current behaviour: Column 3 will wrap when the contents expand beyond 390, but resizing the window will not cause this column to resize, but will cause column 5 then 4 disappear off screen.
Here's the code so far:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="ListItemControl"
Grid.Column="0"
MinHeight="50"
Width="auto"
VerticalAlignment="Top">
<Border Background="LightBlue"
Margin="1,0,1,1" />
<Grid VerticalAlignment="Center"
Margin="20,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="130" />
<ColumnDefinition Width="*"
SharedSizeGroup="col2" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="auto"
SharedSizeGroup="col4" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition MinHeight="50" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
Grid.Row="0"
Margin="0,10,0,10"
Text="Due" />
<TextBlock Grid.Column="1"
Grid.Row="0"
Margin="0,10,10,10"
Text="Some Date" />
<TextBlock Grid.Column="2"
Grid.Row="0"
Margin="0,10,30,10"
Text="There is some potentially long text here. This is a placeholder and should wrap."
TextWrapping="Wrap"
MaxWidth="390" />
<TextBlock Grid.Column="3"
Grid.Row="0"
Margin="0,10,10,10"
Text="Who's responsible" />
<TextBlock Grid.Column="4"
Grid.Row="0"
Margin="0,10,10,10"
Text="Name - could be a very long name" />
</Grid>
</Grid>
</Grid>
Any help greatly appreciated!
Your ListItemControl Grid is inside another Grid with a single column, dont know the reason. Remove that parent Grid and you are done.

window resize when textbox resize

Here is the code for Textbox available in my window(form1.xaml),My requirement is when i am resizing my window i want to resize the textbox width also, How can i able to achieve this....
<TextBox Width="500" HorizontalAlignment="Left" Margin="5,0,0,5" TextWrapping="Wrap" AcceptsReturn="True" Text="{Binding Result,UpdateSourceTrigger=PropertyChanged,ValidatesOnDataErrors=True}" IsEnabled="{Binding OpenMode,Converter={StaticResource EnableModeConverter}}" Height="70" />
In WPF you typically place TextBox control within layout Grid control and set the ColumnDefinition Width property of that Grid cell to some relative value "*", so it will resize with the Window. Do NOT use a fixed Width="500" as per your sample: also, remove that "HorizontalAlignment="Left" (the default value is HorizontalAlignment="Stretch", so you can just omit it to simplify your XAML). See the following sample code snippet:
<Grid Name="Grid1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<TextBox Name="TextBox1" Grid.Row="0" Grid.Column="0" Height="70" Margin="5,0,0,5" TextWrapping="Wrap" AcceptsReturn="True" (...Rest of Your code) />
</Grid>
Note: The same technique could be applied to a vertical "Height" property in case you need to make it also resizable.
Hope this will help. Best regards,
Set HorizontalAlignment to Stretch, and don't set the Width
<Grid>
<TextBox HorizontalAlignment="Stretch"
Margin="5,0,0,5"
TextWrapping="Wrap"
AcceptsReturn="True"
Height="70" />
</Grid>
Layout in WPF is heavily depend on the parent container. For example, create a form with labels and input fields, consider using a Grid panel. Controls in WPF by default resize according to the layout behavior of their parent. Here is an example of a window with two labeled text boxes and two buttons that resize along with the window.
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="Contact Name" Grid.Row="0" Grid.Column="0" />
<TextBox Grid.Row="0" Grid.Column="1" />
<Label Content="Contact Location" Grid.Row="1" Grid.Column="0" />
<TextBox Grid.Row="1" Grid.Column="1" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1">
<Button Content="OK" Width="75" Height="24" Margin="3" />
<Button Content="Cancel" Width="75" Height="24" Margin="3" />
</StackPanel>
</Grid>
</Window>

Align WPF RibbonTextBox Problems

I was creating an interface in using the Ribbon Control where I faced this problem. The screenshots below explain it.
The XAML Markup is as such.
<ribbon:RibbonGroup x:Name="PSO2" Header="Data Entry Section">
<ribbon:RibbonTextBox Label="x1_min" SmallImageSource="Images/Document.png" TextBoxWidth="50"/>
<ribbon:RibbonTextBox Label="x1_max" SmallImageSource="Images/Document.png" TextBoxWidth="50"/>
<ribbon:RibbonTextBox Label="x2_min" SmallImageSource="Images/Document.png" TextBoxWidth="50"/>
<ribbon:RibbonTextBox Label="x2_max" SmallImageSource="Images/Document.png" TextBoxWidth="50"/>
<ribbon:RibbonTextBox Label="Iterations" SmallImageSource="Images/Document.png" TextBoxWidth="50"/>
I wanted the TextBoxes to be exactly aligned however no matter whatever I did the didn't align. Setting or un-seeting the TextBoxWidth property didn't help either. Any solutions? Sorry I have <10 reputations so couldn't post an image directly.
Thanks for any help.
It is a little hacky, but the solution I found is to forget about trying to align the elements using the Ribbon element alignment controls directly and align the elements using a grid within the RibbonGroup
The first challenge is the grid itself doesn't align properly within the ribbon group, but I solved that by binding the width of the grid to the width of the ribbon group, so it will be resized as the ribbon group gets resized.
The 2nd is aligning the labels since the label is part of the RibbonTextBox control. The solution there is to use another control to provide the text label (Label or TextBlock) and just leave RibbonTextBox.Label blank.
<RibbonGroup x:Name="PSO2" Header="Data Entry Section" Width="270">
<Grid Width="{Binding ElementName=PSO2, Path=ActualWidth}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="x1_min" Grid.Column="0" Grid.Row="0" />
<RibbonTextBox Label="" SmallImageSource="Images/Document.png" TextBoxWidth="50" Grid.Column="1" Grid.Row="0"/>
<TextBlock Text="x1_max" Grid.Column="0" Grid.Row="1" />
<RibbonTextBox Label="" SmallImageSource="Images/Document.png" TextBoxWidth="50" Grid.Column="1" Grid.Row="1"/>
<TextBlock Text="x2_min" Grid.Column="0" Grid.Row="2" />
<RibbonTextBox Label="" SmallImageSource="Images/Document.png" TextBoxWidth="50" Grid.Column="1" Grid.Row="2"/>
<TextBlock Text="x2_max" Grid.Column="2" Grid.Row="0" />
<RibbonTextBox Label="" SmallImageSource="Images/Document.png" TextBoxWidth="50" Grid.Column="3" Grid.Row="0"/>
<TextBlock Text="Iterations" Grid.Column="2" Grid.Row="1" />
<RibbonTextBox Label="" SmallImageSource="Images/Document.png" TextBoxWidth="50" Grid.Column="3" Grid.Row="1"/>
</Grid>
</RibbonGroup>
And using this, you end up with a RibbonGroup that looks like
The biggest limitation is the RibbonTextBox's image going to be misplaced between the label and the text box. To overcome this, you would have to add an extra column set and put the icon in there instead of using RibbonTextBox.SmallImageSource

How to cut TextBox width to prevent out of the Grid?

I have the next layout
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Width="60" Height="60" />
<StackPanel Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Orientation="Horizontal">
<TextBlock Text="Title should be long" HorizontalAlignment="Left" />
<Ellipse Fill="White" Stroke="White" Width="7" Height="7" />
</StackPanel>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Message" />
<TextBlock Grid.Row="1" Grid.Column="2" Text="Info" />
</Grid>
I have an issue in the StackPanel which hosts a Title and Ellipse, the goal is the Online marker by the ellipse whitch should be placed at the end off the title. But it shouldn't out of a view part.
I have tried to put TextBox and Ellipse into cells of the Grid unfortunatly it doesn't help.
<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
<Grid.ColumnsDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnsDefinitions>
<TextBlock Grid.Column="0" Text="Title should be long" HorizontalAlignment="Left" />
<Ellipse Grid.Column="1" Fill="White" Stroke="White" Width="7" Height="7" />
</Grid>
In my mind it should render correct, but the ellipse is out of view port again.
This is a Expression Blend layout scrinshots, the same layout is rendering in runtime.
The Grid bounds:
The TextBox bounds:
The Ellipse bounds:
So the TextBox and Ellipse is out of the grid :(
Update: I need the next behaviour of layout
1) Short title, the ellipse attached to the title end
2) Long title, the ellipse attached to the right side of container
I tried your code and it renders fine (in other terms it renders in the viewport. See red arrow). Please find attached a screenshot of the results. (I added the showgridlines just to illustrates the rows and cols)
//--- Changed testing and fixed code for intended effect ---//
Code changes in XAML: Swapped the width values for the columndefinitions. Added Textwrapping to textblock in order to see entire text. (You could opt for texttrimming instead depending on your aesthetics.)
<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Title should be really really really really really long" HorizontalAlignment="Left" TextWrapping="Wrap" />
<Ellipse Grid.Column="1" Fill="White" Stroke="White" Width="7" Height="7"/>
</Grid>
Outcome:

Resources