WPF: avoid redrawing of groupbox to fit content - wpf

I'm using a page with a grid with 3 rows where every row contains a groupbox. The groupboxes also contain different grids with different content.
I would like to have all of my groupboxes to fit the same width. Initially that's the case. But when the content of the first group box is updated from code behind, the group box gets redrawn for a very short moment (width is smaller), but a second later it again fits to the width.
Initially it is: "not connected" which changes to "connected", so width is smaller.
The Width of my window is set to maximize, I don't want to set fix width and height for the page and the grids. Is there a way I can only update the content, without the box trying to fit to the content?
Example ( 2 rows):
<Grid Grid.IsSharedSizeScope="True" Name="globalGrid" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="globalCol"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="RowA"/>
<RowDefinition SharedSizeGroup="RowA"/>
<RowDefinition SharedSizeGroup="RowA"/>
</Grid.RowDefinitions>
<GroupBox Header="Connection status"
Grid.Row="0" Grid.Column="0"
HorizontalAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Name="Connected"
Style="{StaticResource iconConnectStyle}"
DataContext="{Binding DeviceConnection}"
Grid.Row="0" Grid.Column="0" />
<TextBlock Text="device 1:"
Grid.Row="0" Grid.Column="1"
Style="{StaticResource statusText}"/>
<TextBlock Name="dev1" Grid.Row="0" Grid.Column="2"
Style="{StaticResource statusText}" />
</Grid>
</GroupBox>
<GroupBox Header="processing status"
Grid.Row="1" Grid.Column="0"
HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock x:Name="processState" Style="{StaticResource statusText}"/>
<ProgressBar x:Name="progressState"/>
</StackPanel>
</GroupBox>
</Grid>

I'm now using a UniformGrid, that solved the problem...

Related

Layout problem with autogenerated DataGrid in WPF/XAML

I've got a problem with WPF/XAML. I can't figure out how to let the left Grid (with a centered image inside and backgroud color) grow its height, depending on the autogenerated height on the datagrid on the right.
They both are presented in a global grid. If I set a fixed height on the corresponding row, the autogenerated datagrid shows a cruel vertical line, depending on the fixed row-height I set before.
layout with row-height on auto
layout with fixed row-height, but with ugly line at the bottom
<!--ElementR0C1-->
<Grid Name="test">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--Width ElementsC1-->
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="500"/>
</Grid.ColumnDefinitions>
<!--START-->
<Label Grid.Row="0" Grid.Column="0" Style="{StaticResource L1}" VerticalAlignment="Top">Process</Label>
<Grid Grid.Row="1" Grid.Column="0" Background="DDDDDD">
<Image Margin="0,30,0,0" Height="64" Width="64" Source="../../Resources/ok.png" Name="imgJobs" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<DataGrid x:Name="grdJobs" Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" Width="500">
-- some stuff here
</DataGrid>
</Grid>

ViewBox and blurring effect issue?

I do not understand if it's a bug that I'm causing some with wrong setting or simply a problem of WPF.
I'm trying to see all content of a GroupBox and I'm using the Viewbox as some label without viewBox for a certain resolution are not visible.
Everything works fine, but it seems there is something wrong with the rendering.
As seen from the image:
by setting this in viewBox:
<Viewbox Stretch = "Fill" Grid.Column = "0" Grid.Row = "0" StretchDirection = "Both">
I can see all content but as you can see the labels are blurred and seem to spread so forced, I do not like.
In the other groupbox I tried to set this:
<Viewbox Stretch="Uniform" Grid.Column="1" Grid.Row="0" StretchDirection="Both">
and I get a nicer effect already at the level of rendering:
the problem is that they remain of the white bands on the right and left (if obviously imposed the minimum resolution reached by the software) and this for me is not nice because I do not use all the UI application.
For those wishing to take a quick look at the complete XAML:
<Viewbox Stretch="Uniform" Grid.Column="1" Grid.Row="0" StretchDirection="Both">
<GroupBox x:Name="Ospite_Analisi" Header="Ospite">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Label>Inserire scudetto</Label>
</Grid>
<Grid Grid.Column="1" Grid.Row="0">
<StackPanel Orientation="Vertical">
<Label>Nome Squadra</Label>
<Label>Nazione</Label>
<Label>Campionato</Label>
</StackPanel>
</Grid>
<Grid Grid.Column="2" Grid.Row="0" Grid.RowSpan="2">
<Label>Inserire controllo forma</Label>
</Grid>
<StackPanel Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Orientation="Horizontal" HorizontalAlignment="Center">
<Label>Vittorie casa</Label>
<Label>Vittorie fuori</Label>
</StackPanel>
<Grid Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3">
<DataGrid>
...
</DataGrid>
</Grid>
</Grid>
</GroupBox>
</Viewbox>
What I want to achieve is this:
-Fix Both GroupBox in maximum width (the minimum resolution) in viewBox without losing quality and without making it seem forced rendering. How can I achieve this?

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>

How to position WPF nested controls absolutely in a window

I have some controls nested in some panels.
The panels themselves are not arranged with the same x position within a window.
I'd like the controls inside the panels to have a fixed position relative to the window, not the panel (so they all line up vertically, in this case).
To be clear, the Panels themselves have an arbitrary position in the window. One can imagine that the user should be able to effect the Panel positions, but the nested controls would stick to the same X coordinate relative to the window.
I don't think I can use a Canvas, because that's positioning relative to the edges of the canvas.
Any ideas?
Many thanks.
Don't use Panels... instead, use Grids. If you use Grids, then you can take advantage of the Grid.IsSharedSizeScope Attached Property and the ColumnDefinition.SharedSizeGroup Property. Using these, you can line up columns from different Grids, as long as you have a parent Grid with the IsSharedSizeScope property set to true.
Here is an example taken from the first linked page on MSDN:
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<Grid ShowGridLines="True" Margin="0,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="FirstColumn"/>
<ColumnDefinition SharedSizeGroup="SecondColumn"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
</Grid.RowDefinitions>
<Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0" Width="200" Height="100"/>
<Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0" Width="150" Height="100"/>
<TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="FirstColumn"/>
<ColumnDefinition SharedSizeGroup="SecondColumn"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
</Grid.RowDefinitions>
<Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0"/>
<Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0"/>
<TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>
</StackPanel>

How to organize elements inside a Button

i'm new to wpf .
i got a wpf button ,
in it i need to place 2 elements a textblock and a viewbox encapsulating a canvas
the problem is i can't seem to see the canvas at all , unless i give it static values for its size
<Button Margin="10,30,10,10" Padding="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Viewbox Margin="0,0,0,5">
<Canvas Background="red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="1" >
<Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Black" StrokeThickness="4" ></Ellipse>
</Canvas>
</Viewbox>
</Grid>
</Button>
iv'e also attempted this using a stack panel with an horizontal orintation
in any case the canvas does not show
any thoughts of what i'm doing wrong ?
thanks.
Attached Grid properties only work when at the Grid-child-level, i.e. the properties set on the canvas do not take effect they should be set on the container, the ViewBox which is a direct child of the Grid.
Viewboxes only work if the content has a concrete size, you probably need neither the ViewBox nor the Canvas. If you want the Ellipse to be a circle set Stretch="Uniform"
The contents of Buttons do not stretch by default you should set HorizontalContentAligment and its vertical counterpart to Stretch.
e.g.
<Button Margin="10,30,10,10" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
<Ellipse Stretch="Uniform" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stroke="Black" StrokeThickness="4"></Ellipse>
</Grid>
</Button>

Resources