I'm trying to use the Silverlight expander control and the content of the expander does not resize evenly to the rest of the content when expanded. any ideas? this is what it looks like
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<toolkit:Expander ExpandDirection="Right" Grid.Column="0" IsExpanded="True">
<toolkit:Expander.Header>
<TextBlock Text="Title" Foreground="Black" />
</toolkit:Expander.Header>
<toolkit:Expander.Content>
<Controls:Grid x:Name="LayoutRoot" ShowGridLines="True">
<ContentControl Navigation:ContentArea.AreaName="shellView" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
<ContentControl x:Name="loaderView" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
</Controls:Grid>
</toolkit:Expander.Content>
</toolkit:Expander>
<ContentControl Grid.Column="1" x:Name="testPage" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
</Grid>
The result is the expander shows about 30% of the available area but i want it to show 50%
You've got the Expander sitting it column #1 of a 2-column Grid. The fact that the column's width is set to Auto, and the other columns width is *, means that it will only take the space it needs (and giving its children a Stretch alignment will not override this, as there is no fixed space to expand into).
Just removing that Auto should fix your problem, and make the Expander content fill 50% of the space available to the root Grid:
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
That's the equivalent of giving each column equal width:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Related
I am using Xamarin forms [mediaElement]https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/mediaelement view to play a video, but on top of the video should be a camera feed of the front camera, why does the camera feed gets lost when the video starts to play?
I am now using a grid to overlay the camera feed from the video player and here is what I have so far.
<Grid VerticalOptions="StartAndExpand"
RowSpacing="4">
<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<MediaElement
Grid.Row="0"
Grid.Column="0"
Aspect="AspectFit"
Source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
ShowsPlaybackControls="False"/>
<Grid Grid.Row="0"
Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="6*"/>
</Grid.ColumnDefinitions>
<local:CameraPreview Camera="Front"
Grid.Row="0"
Grid.Column="1"/>
<StackLayout Grid.Row="1"
Grid.Column="1"/>
</Grid>
</Grid>
And this is how it should be positioned.
sample_layout
Any advice would be a great help ! Thanks.
Say I create the following shared XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Text="One" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Text="Two First" />
<Button Grid.Column="1" Text="Two Second" />
</Grid>
<Button Grid.Row="2" Text="Three" />
</Grid>
I then run this on an Android device and run the TalkBack screen reader. As I swipe forward through the UI, TalkBack moves from button "One", to button "Three", and then to buttons "Two First" and "Two Second". This doesn't match the order in which I've defined the UI, so is this expected? I get what I consider the expected navigation of moving through the buttons in order of "One"->"Two First"->"Two Second"->"Three", when running the same UI as a Xamarin.UWP app and using the Narrator screen reader.
I've found I can avoid the unexpected TalkBack navigation if I update the UI such that certain parts of the UI are balanced in how deep the UI is defined in the XAML hierarchy. For example, if I wrap button "Three" in a Grid, then I get the expected navigation path.
I can also avoid the unexpected TalkBack navigation if I add a TabIndex to everything that I want TalkBack to reach, but that'll need maintaining as the app UI evolves over time, and as I understand things, not all types of Xamarin.Forms control support TabIndex.
not sure if it's a problem from designs of Grid .From shared code , I think Grid maybe set the second Row as the low level of priority .Because the second Row define the Column individually .
If that is the logic about the design of Grid . You can have a try with define the Row and Column at the same level of priority .
Code as follow :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0"
Grid.ColumnSpan="2"
Text="One" />
<Button Grid.Row="1"
Grid.Column="0"
Text="Two First" />
<Button Grid.Row="1"
Grid.Column="1"
Text="Two Second" />
<Button Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Text="Three" />
</Grid>
I have loaded the views inside a grid as below,
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Entry x:Name="SearchTextBox"
Grid.Row="0"
HorizontalOptions="Fill"
Placeholder="Search"
VerticalOptions="Fill" />
<ListView x:Name="listView"
Grid.Row="1"
HorizontalOptions="Fill"
VerticalOptions="Fill" />
<local:CustomListView x:Name="customView"
Grid.Row="0"
ItemsSource="{Binding Items}">
</local:CustomListView >
</Grid>
Out of 3 views in the above code snippet, first two views are rendered properly. But the 3rd view(custom view) not rendered. CustomViews are not rendered only if I set RowDefinition as "Auto". So, anyone please tell why the custom view is not loaded if I set "Auto".
your CustomListView probably doesn't request a minimum size correctly, and as the middle row has a height of *, it takes all of the available space minus the minimum size requests.
I'm having trouble with Grid Overlays in UWP Apps.
I have the following Control (without ColumnDefinitions for better viewing):
<Grid>
<Grid Grid.Column="1" Background="Transparent" Tapped="doneGrid_Tapped">
<TextBlock Text="fertig" Foreground="Lime" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="3" Background="Transparent" Tapped="allGrid_Tapped">
<TextBlock Text="alle" Foreground="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="5" Background="Transparent" Tapped="undoneGrid_Tapped">
<TextBlock Text="ausstehend" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Grid>
Which is working nice. I can tap one of the three areas and it triggers the Tapped event from the Grid. Now I want to go a step further and also include a "swiping gesture".
So I put a Grid on top of that:
<Grid Grid.ColumnSpan="7" Background="Transparent" ManipulationMode="TranslateX" ManipulationStarted="..." ManipulationCompleted="..." />
Now I can swipe left and right, but my Tapping does not work anymore, only swiping.
How can I make Tapping AND swiping both work?
I tested it, when you put a Grid use Grid.ColumnSpan = "7" after your other grids, you actually put a Grid on top of the others, so you can only get the focus of this Grid. When you put a Grid use Grid.ColumnSpan = "7" before your other grids, it is on the lower level of the others, it can be manipulate outside gird3, grid5, and grid7, and these 3 grids can be tapped, but when you want to start manipulate from grid3, 5, 7, it can't work. To achieve your expect, youdon't need to add any Gird use Grid.ColumnSpan = "7", you just need to manipulate that like this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid ManipulationMode="TranslateX" ManipulationStarted="manipulationStarted" ManipulationCompleted="manipulationCompeleted">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Background="Transparent" Tapped="doneGrid_Tapped">
<TextBlock Text="fertig" Foreground="Lime" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="3" Background="Transparent" Tapped="allGrid_Tapped">
<TextBlock Text="alle" Foreground="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="5" Background="Transparent" Tapped="undoneGrid_Tapped">
<TextBlock Text="ausstehend" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<!--<Grid Grid.ColumnSpan="7" Background="Transparent" ManipulationMode="TranslateX" ManipulationStarted="manipulationStarted" ManipulationCompleted="manipulationCompeleted" />-->
</Grid>
</Grid>
Now you can tap them or swip the Grid.
Wish this helps you.
I managed to setup rows and columns from the code but couldn't move this settings to xaml:
grid.RowDefinitions = new RowDefinitionCollection {
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
};
grid.ColumnDefinitions = new ColumnDefinitionCollection {
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
};
The following doesn't work:
<Grid x:Name="grid" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
...
</Grid>
From the documentation I managed to fetch only c# implementation
I also get the same behaviour (does not fill and expand) for a grid with a single cell (1 row / column, although I am not sure why we would ever need a grid with a single cell full size of screen), but it seems to work fine for a 2 x 2, 3 x 3 cell grid (have not tried others yet).
The Height="" and Width="" attributes are required in Xamarin Forms although I "think" they are not needed in WPF as the default assumes this is the case.
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Text="1"></Button>
<Button Grid.Row="1" Grid.Column="1" Text="2"></Button>
</Grid>
</ContentPage.Content>
Here is a sample
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>