I have a following problem,
my combobox on winphone8.1 opens its items under others controls.. can anybody have any solve solutions?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Combobox Grid.Row="0"/>
<TextBox Grid.Row="1"/>
<TextBox Grid.Row="2"/>
</Grid>
If you want your control to cover other items, instead of pushing them, just give your control a RowSpan. It makes the control span over multiple rows.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="1"/>
<TextBox Grid.Row="2"/>
<Combobox Grid.Row="0" Grid.RowSpan="3"/>
</Grid>
Notice that the Combobox is declared after the TextBoxes, in order to be in front of them and cover them.
On a sidenote, there's no need to explicitly set Grid.Row (or column) if it's 0 since that's its default value. So you could just ommit Grid.Row="0" on your Combobox. The same goes when setting * as height or width of a row/column defition. Can be shortened to
<RowDefinition/>
Related
I have a WPF application where I use a background image.
<Window.Background>
<ImageBrush ImageSource="Images/background.png"/>
</Window.Background>
In the window I have grids and columns definitions.
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
Everytime the window size is changed, the background image is resized, which is okay.
The problem is that the controls in the form are loosing their position.
The background looks this way:
I need to add textboxes in between the lines so it can look like this:
So far I tried canvas, dockpanel, putting the textboxes in different user control, but nothing helped.
The controls do not have margins/width or height only rowspan and columnspan.
Any idea would be helpful :) thanks!
Your Textboxes need to be sized relative to the window size. You can define the colum widths and line heights as fractions of the width and height by specifying a size with a star (*).
See example below for a starting point. You can of course tweak the numbers a bit.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"/>
<ColumnDefinition Width="0.29*"/>
<ColumnDefinition Width="0.02*"/>
<ColumnDefinition Width="0.29*"/>
<ColumnDefinition Width="0.2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.55*"/>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="0.1*"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="1" Grid.Column="1"/>
<TextBox Grid.Row="1" Grid.Column="3"/>
<TextBox Grid.Row="3" Grid.Column="1"/>
<TextBox Grid.Row="3" Grid.Column="3"/>
</Grid>
Following my problem.
Setting all the Rows as Auto, the last groupbox exceeds the container.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
...
<GroupBox Header="Results" Grid.Row="2" Grid.ColumnSpan="3">
<DataGrid x:Name="dgResults">
</Grid>
By setting the last as * the scrollbar appears, however if I expand the window the groupbox reaches the bottom.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
...
<GroupBox Header="Results" Grid.Row="2" Grid.ColumnSpan="3">
<DataGrid x:Name="dgResults">
</Grid>
How can I get auto groupbox size and a datagrid with a vertical scroolbar?
I solved it by using DockPanel which constrains its children.
I have some label "my text".
I have some UserControl, inside it have text ("text part") and some visual part near text.
Left picture is what i want to achieve. Right is what i got.
I want center my UserControl not by its default center but by custom point.
Because "my text" may vary in length, meanwhile it should be centered relative to my controls "text part" center.
Goal ^ Current ^
You will need to define separate columns, one which is centered for your centered texts, and another one for your visual label.
The tricky part now is synchronizing one column from within the UserControl with one outside of it. You can use SharedSizeGroups for this, like in this example, I just used a ContentControl instead of the UserControl for convenience:
<Grid IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" Background="Red">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="colLeft"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="colRight"/>
</Grid.ColumnDefinitions>
<Label HorizontalAlignment="Center" Background="LightBlue">MyText</Label>
</Grid>
<ContentControl Grid.Row="1">
<Grid HorizontalAlignment="Stretch" Background="Yellow">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="colLeft"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="colRight"/>
</Grid.ColumnDefinitions>
<Label HorizontalAlignment="Center" Background="Lime">text part a little longer
</Label>
<Label Grid.Column="1">someVisualLabel</Label>
</Grid>
</ContentControl>
I'd like to make 3 rows in a grid in a WPF datatemplate. The first is set to Height=Auto, the second fills the available space and the third is equal to the first. I've tried with binding to elementname, but that doesn't seem to work
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" x:Name="definition" />
<RowDefinition Height="*" />
<RowDefinition Height="{Binding ElementName=definition, Path=ActualHeight}" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Height="100" />
</Grid>
In this example I hope the height of the third row is also 100px. Any suggestions?
Try this:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Height="100" Background="Red" x:Name="definition"/>
<Grid Background="Green" Grid.Row="1"/>
<Grid Background="Blue" Grid.Row="2" Height="{Binding ElementName=definition, Path=ActualHeight}"/>
</Grid>
RowDefinition.ActualHeight is not an actually dependency property, which means your binding won't get any "updates" about ActualHeight being changed.
You can follow this pattern:
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="{Binding ElementName=FirstRow, Path=ActualHeight}" />
<Grid Grid.Row="0" x:Name="FirstRow" />
<Grid Grid.Row="1" x:Name="SecondRow" />
<Grid Grid.Row="2" x:Name="ThirdRow" />
</Grid.RowDefinitions>
The reason this should work theoretically, is simple enough: RowDefinition.ActualHeight == FirstRow.ActualHeight (by default it should fill available space)
Alternatively, just steal the RowDefinition, and perhaps create your own CustomRowDefinition which can implement dependency property, called ActualHeight, and fire updates.
http://dotnetinside.com/in/type/PresentationFramework/RowDefinition/4.0.0.0
For a project I am using XAML. I have devided my screen in different parts. The moment when I add a button, I get an error.
The error:
'property elements cannot be in the middle of an element's content'
The code I am using for the button where the error has been found:
<Button x:Name="cntButton" Content="Connect" Grid.Column="1" Grid.Row="2" Click="cntButton_Click" />
Does anyone know what the problem is and how I have to solve it?
The rest of the code:
<Window x:Class="Pesten.View.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">
<Grid>
<Image Grid.RowSpan="4" Grid.ColumnSpan="3" Stretch="Fill" Source="pestenbg.jpg" VerticalAlignment="Top" HorizontalAlignment="Center"/>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Button x:Name="cntButton" Content="Connect" Grid.Column="1" Grid.Row="2" Click="cntButton_Click" />
</Grid>
</Window>
You've defined an image in the grid before the grid properties. Move this to after the row and column definitions.
You're adding Button control in the wrong place of parent control:
Property elements cannot be in the middle of an element's content
Property elements cannot be in the middle of an element's content. They must be before or after the content. This error is occurs when you attempt to use property-element syntax within an element's content.
Move Image after ColumnDefinitions and before Button
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="4" Grid.ColumnSpan="3" Stretch="Fill" Source="pestenbg.jpg" VerticalAlignment="Top" HorizontalAlignment="Center"/>
<Button x:Name="cntButton" Content="Connect" Grid.Column="1" Grid.Row="2" Click="cntButton_Click" />
</Grid>
or move both Image and Button above column/row definition but you cannot split it
Put the column and row definitions directly after the opening tag. All content should follow that (i.e. the and the ).