I have created 3 x 4 Grid in XAML in Landscape view mode. Means 3 rows and 4 columns. Now on view change to portrait i want to make it 4 x 3 means 4 rows and 3 columns. How to do it.
Plz help me to do it.
Thank you in advance...
I am not really sure as to what you are meaning by how to do it, but to define new grid rows and columns would be:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
</Grid>
This creates a 4x3 grid panel where the widths and heights could be changed to a predetermined size or a *. If this isn't what you are looking for let me know.
Finally i solve it using code behind.
I made two grids one with 3 * 4 and one with 4 * 3
and on size_changed event of page identify the applicationViewstate and show hide the required grid
Related
I'm currently using syncfusion's autocomplete, the mode is set to Token which allows me to select multiple items. As I select more items from my autocomplete, they don't appear once I have multiple selected. I'm wondering how can I get the autocompletebox's height to grow automatically.
I've set the MinimumHeightRequest to 60 and I set vertical options to EndAndExpand and it still doesn't grow, cuts off previously selecteditems.
With 1 item selected
With 2 items selected
With 3 items selected
The behaviour i'm looking for is that the height will grow to accommodate the selected items.
<autocomplete:SfAutoComplete x:Name="autoComplete"
DisplayMemberPath="Location"
MultiSelectMode="Token"
MinimumHeightRequest="60"
VerticalOptions="EndAndExpand"
HorizontalOptions="FillAndExpand"
TokensWrapMode="Wrap"
ItemPadding="20,10,0,0"
IsSelectedItemsVisibleInDropDown="false"
Watermark="Search for Location"
SelectedItem="{Binding SelectedLocation}"
DataSource="{Binding FilteredLocations}"
Text="{Binding SearchLocation, Mode=TwoWay}" >
</autocomplete:SfAutoComplete>
You can do this by nesting Grid in the outer layer like this :
<Grid Grid.Row="1"
Margin="10,0,10,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<autocomplete:SfAutoComplete>
......
</autocomplete:SfAutoComplete>
</Grid>
You can refer to this ：https://blog.syncfusion.com/post/overview-of-the-autocomplete-control-in-xamarin-forms.aspx
I am creating an application for Windows Phone 8.1 (non-SilverLight). I want to put a grid class in a canvas class with XAML like below:
I wish to position the Grid in the middle of the Canvas that means that distance between the top of the grid and the top of the canvas is the same as that between the bottom of the grid and the bottom of the canvas. Similarly, the distance between the left of the grid and the left of the canvas should be the same as that between the right of the grid and the right of the canvas.
How do I do that and ensure that the layout is consistent on all types of screen resolution on different phones?
So far, I have this:
<Canvas Grid.Row="1" Grid.Column="1">
<Grid Width="300" Height="200" Canvas.Left="40" Canvas.Top="40">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
</Canvas>
It is not what I wanted when I deploy to my phone and I know fixing the problem by adjusting the height and width manually is not a good solution.
I am a new in this area and sorry if I used the wrong terminologies.
Please help and guide me >.<
You have two basic options to solve this, you can either use a single grid with a lot of margins, so the grid would not touch the edge of the screen. Or you can use a grid within a gird. A canvas should only be used for graphics work, when you want the controls to have a fixed position no matter the screen size.
For your case, I'd use a grid within a grid. A grid centers everything within it, so that solves your problem. But since you said you wanted to add extra info in the margins, I'd do something like this:
<Grid x:Name="Outer>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.ColumnDefinitions>
<Grid x:Name="Inner" Grid.Column="1" Grid.Row="1"/>
</Grid>
That would give you a structure something like this:
Outer
-----------
| | | |
-----------
| | | |
| |inner| |
| | | |
-----------
| | | |
-----------
And a place to add more controls in the outer grid.
Note that a grid is a relatively expensive control, so try to avoid placing it when you can you another control, but that shouldn't deter you when it is useful.
I don't know why you are using a canvas to position your content grid. You can achieve the layout using the below code if canvas is not mandatory.
<Grid Grid.Row="1" Grid.Column="1">
<Grid Width="300" Height="200" HorizontalAllignment="Center" VerticalAllignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
</Grid>
I am trying to create a windows 8.1 application and wanted to know that is there a control that allows me to create something like popup or messagebox in XAML that covers about 80% of the screen with some margin on either sides of the screen? Like when we click on a button and the screen's brightness gets dim except for the popup that is opened. As an example I have attached an image.Example from windows settings
Other than MessageBox there isn't an in-box control which does this. It's fairly easy to implement yourself in Xaml by creating a Grid with a partially opaque background and your controls in the middle of three rows. In this implementation the rows and columns will size to the controls placed in the center. You could also set those sizes more directly if you prefer.
<Grid Background="{ThemeResource DimmedBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Coloured background for the center row -->
<Rectangle Grid.Row="1" Grid.ColumnSpan="3" Fill="{ThemeResource AppThemeBrush}" />
<!-- User control with the contents in the center row + column -->
<local:MyControls Grid.Row="1" Grid.Column="1" />
</Grid>
There are third party libraries which include controls like this. For example see Callisto's CustomDialog.
Suppose I define a Grid in xaml like:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
then I want to add child control to the grid in column=0, row = 1 in code behind.
How to implement it?
Quite a late response but here you go:
Grid.SetRow(yourControl, 1);
Grid.SetColumn(yourControl, 1);
Grid.SetRow(otherControl, 0);
Grid.SetColumn(otherControl, 0);
The first parameter is the control you've added to your grid. The second parameter is the column/row position you want to add it to.
I have a Silverlight 4 application. The MainPage which is the RootVisual of the application has many controls on it - one of which is a user control called VideoPlayerView. What I would like is when a user clicks on the fullscreen icon on this control, for this control to "pop out" of the page and go full screen (i.e. all the other controls on this page must be hidden and only the VideoPlayerView control would show fullscreen).
The MainPage has Row and Column definitions set up as follows:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="143"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="81"/>
<ColumnDefinition Width="27"/>
<ColumnDefinition Width="624"/>
<ColumnDefinition Width="125"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
<RowDefinition Height="40"/>
<RowDefinition Height="10"/>
<RowDefinition Height="21"/>
<RowDefinition Height="10"/>
<RowDefinition Height="199"/>
<RowDefinition Height="220"/>
<RowDefinition Height="21"/>
<RowDefinition Height="160"/>
<RowDefinition Height="26"/>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
When the VideoPlayerView is made full screen, I assume it needs to go to the 0,0 position and those definitions should be set to Auto at that point?
I have tried removing the VideoPlayerView control from its current parent, clearing the MainPage.LayoutRoot's children collection and adding the videoplayerview to the MainPage's Layoutroot - but for some reason the VideoPlayerView only showed in the top 1/4 of the screen.
If anyone knows of a way of doing this please let me know!
Probably the reason why the video player is filling only a quarter of the screen is because it is added by default to the first row and column of the grid. If you want it to span several rows and columns you have to use Grid.ColumnSpan=8 and Grid.RowSpan=11 so that it fills the whole screen.
Also, it is not strictly necessary for you to remove all the controls from the children collection; turning their visibility to Collapsed should be enough.
You could handle all these changes using visual states and then you could do something like:
VisualStateManager.GoToState(this, "Normal", true);
and:
VisualStateManager.GoToState(this, "Fullscreen", true);
The problem was in our XAML - there was a Clip property set on the video player view that was cutting off the video in full screen mode. Removing this property in full screen mode solved the problem.