I have a grid with two columns with width 3* and 1*. Inside the first column i have a stack panel with "width="Auto"" and with different grids inside it with vertical orientation. The grids have two columns with 15* and 1*.
So my question is how to set the first column of the first grid to adjust to the size of the screen and the second column to be always static lets say 50p? i've trayed to set auto to the first column and its elements but it didn't work.
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinitions Width="*"/>
<ColumnDefinitions Width="50"/>
</Grid.ColumnDefinitions>
<StackPanel>
<Grid>
</Grid>
<Grid>
</Grid>
<Grid>
</Grid>
<Grid>
</Grid>
</StackPanel>
</Grid>
Related
I know that We can use a view box to simulate a line in xaml
<BoxView
VerticalOptions="Fill"
HorizontalOptions="Center"
WidthRequest="1"
Color="Black"/>
That would create a vertical line, however I want to create something like:
I wonder if a grid would be enough to create something like that
How to use a viewbox to draw the vertical line from bottom to top until middle, and then use other view box to middle to right
I was thinking on using a stacklayout instead of a grid and then use
StackOrientation.Vertical and LayoutOptions.Center but I don´t know exactly how to proceed.
What would be the best or easiest way to do it?
I have created something similar that you are looking for:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Grid.RowSpan="2" BorderBrush="Black" BorderThickness="4">
</Border>
<Border Grid.Column="2" Grid.Row="2" BorderBrush="Black" BorderThickness="4">
</Border>
</Grid>
PS: Just make sure that the controls inside the first border do not cross the first column of the second row inside the grid as the second border is overlapping the first one.
I want to place an image at top left of screen. and a TextBlock at center of same line as image placed. Means at the top of screen there should be an image at left and a TextBlock at center. I tried like below. But both image and TextBlock are seems to be aligned at center.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="AliceBlue" VerticalAlignment="Top">
<Image x:Name="icon_goback2" Source="Assets/icon_home.png" Margin="10,0,0,0" Height="50" Width="50" />
<TextBlock Text="Your Page" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="70" />
</StackPanel>
Just use a Grid and set HorizontalAlignment as Left and Center for Image and TextBlock respectively
<Grid VerticalAlignment="Top">
<Image HorizontalAlignment="Left"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
You can try the following code :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image x:Name="icon_goback2" Source="Assets/icon_home.png" Margin="10,0,0,0" Height="50" Width="50"/>
<TextBlock Grid.Column="1" Text="Your Page" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="70"/>
</Grid>
What this code will do is divide your grid into 3 Columns and place the <Image> in the 1st Column (Grid.Column="0") and <TextBlock> in the 2nd Column (Grid.Column="1"). You can additionally change the alignment of Image and Texblock if you need to.
Also, it is good to note that StackPanel will always override the Horizontal alignment of the Child elements when you are setting its orientation as horizontal. This is the reason why using a grid and dividing it into multiple rows and columns is better in scenarios like this.
Edit :
Since you have quite a large textblock you can change the column definitions to something like this :
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
This will divide your grid into 2 parts with the column widths set automatically.
Hope this helps.
In windows Phone XAML, I have a StackPanel in Horizontal Orientation and I want it's child UI controls to share equal available width equally or in my case, I want TextBlock to share 1/3 and TextBox to get 2/3 of available width. How I can get that without giving hard coded values to width?
Below is the code example.
<StackPanel Orientation="Horizontal">
<TextBlock Text="Bill Total: "
VerticalAlignment="Center"/>
<TextBox InputScope="Number"
VerticalAlignment="Center"
PlaceholderText="Bill Total"
AcceptsReturn="True"
x:Name="txtBillTotal"
/>
</StackPanel>
As far as I can see, you can't do that with StackPanel. Try to use Grid instead with column definitions width set proportionally :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Bill Total: "
VerticalAlignment="Center"/>
<TextBox Grid.Column="1"
InputScope="Number"
VerticalAlignment="Center"
PlaceholderText="Bill Total"
AcceptsReturn="True"
x:Name="txtBillTotal"
/>
</Grid>
That will set the 2nd column twice wider than the 1st, which means 2/3 Grid width. And the rest 1/3 given to the 1st column.
I have a ListViewdefined in a Grid like this:
<Border BorderThickness="1" Grid.Row="1" VerticalAlignment="Top" Margin="0,0,0,50" BorderBrush="Gray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Test" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ListView
Grid.Row="1"
ItemsSource="{Binding MyItems}"
Padding="40,40,40,40"/>
</Grid>
My problem is that I want the last item of the listview to be 40 pixel away from listView's bottom, but my code is not working, the top padding is ok, but bottom has no effect. That is like adding a blank item on the beginning and the end of the listview but that would be a stupid thing to do.
You can put the ListView inside of another Scrollviewer and pad the ListView itself.
I am working on a silverlight application and am creating girds dynamically with each having one row and two columns. In the first grid I am populating column with some fields(text box/ combobox/ datepicker etc) and leaving column 2 blank. In the second grid I am populating the second column and leaving the first blank and so on alternately. Now I want the data from the second column in the second grid in the first grid. (In a way I want to merge two grids). Is there any way to do that?
It goes something like this:
<Grid>
<views:DynamicFieldsView IsTabStop="True" Grid.Column="0" DataContext="{Binding Path=FieldProperties}" />
</Grid>
And the dynamicFieldsView is like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="{Binding GridColumnNumber}" width = 140 ....>
<Controls:FieldItemControl FieldType="{Binding Type}" Margin="10,0,0,0" Grid.Column="{Binding FieldGridColumnNumber}">
<Controls:FieldItemControl.DataTemplates>
<Controls:TemplateSelectorDataTemplate FieldType="TextBox">
<TextBox Text="{Binding UserText}" width = 200 ....>
</Controls:TemplateSelectorDataTemplate>
<Controls:TemplateSelectorDataTemplate FieldType="Button">
<Button x:Name="SearchButton" Margin="10 10 10 0" .....>
</Controls:TemplateSelectorDataTemplate>
<Controls:TemplateSelectorDataTemplate FieldType="DropDownList">
<DynamicControls:AutoCompleteComboBox VerticalAlignment="Top" Width =200 ....>
</Controls:TemplateSelectorDataTemplate>
....
....
....
</Controls:FieldItemControl.DataTemplates>
</Controls:FieldItemControl>
</Grid>
You should clone the control from the second grid into the first and make a binding so both display same data.