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.
Related
I am using xamarin. forms, I need the create a circle as following, As the colours are generic I am unable to use the image. Is there any way to get a circle as follows.
I tried:
<Grid ColumnSpacing="-10" HorizontalOptions="EndAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Frame CornerRadius="16" HeightRequest="25" WidthRequest="25" BackgroundColor="Red" Padding="0" Grid.Column="0" HasShadow="False"/>
<Frame CornerRadius="16" HeightRequest="25" WidthRequest="25" BackgroundColor="Green" Padding="0" Grid.Column="1" HasShadow="False"/>
</Grid>
Got output as:
You can use the frame, but you must use the ClipToBounds property, with a Grid inside.
<Frame HorizontalOptions="Center" VerticalOptions="Center"
HeightRequest="100" WidthRequest="100" CornerRadius="50" IsClippedToBounds="True" Padding="0">
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="Yellow"/>
<BoxView Grid.Column="1" BackgroundColor="Red"/>
</Grid>
</Frame>
Which results in:
Make Corner radius half of width/height request. Suppose widthrequest = 26 then heightrequest should be the same and Cornerradius should be 13(26/2);
I'm trying to create a grid layout with a height of 8px with cornered radius horizontally as below snapshot.
: https://ibb.co/s1dkpnw
<Grid Margin="0,0,0,24" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*">
</ColumnDefinition>
<ColumnDefinition Width="4*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8">
</RowDefinition>
</Grid.RowDefinitions>
<Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
<Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
<Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>
</Frame>
</Grid>
I'm able to get the UI as in the below snapshot.
: https://ibb.co/7nLTgdL
I'm not able to get the UI displyed within the frame visible, although i'm getting a cornered radius for a two columned layout. It just shows a empty frame.
Please let me know how to design the XAML UI to get the UI as in the design snapshot.
Got the UI aligned by pushing the Grid within the frame control as below,
<Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*">
</ColumnDefinition>
<ColumnDefinition Width="4*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8">
</RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
<Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>
</Grid>
</Frame>
AbsoluteLayout can help you:
<AbsoluteLayout HorizontalOptions="Center">
<Frame
AbsoluteLayout.LayoutBounds="0,0,150,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#0086C9"
CornerRadius="7" />
<Frame
AbsoluteLayout.LayoutBounds="120,0,150,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#D8D8D8"
CornerRadius="7" />
<Frame
AbsoluteLayout.LayoutBounds="120,0,30,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#0086C9"
CornerRadius="1" />
</AbsoluteLayout>
Output: https://i.ibb.co/jh6QmBL/ss.png
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>
I'm new to Windows Phone 8 Development. I have developed ASP.NET websites before.
My pages (In WP8 Application) share the same headers and footers.
So what is the best method to implement a Master Page like in windows phone 8 ?
I've came across a few solutions that use Frame tag ; but they were not applicable.
Any help is highly appreciated.
PS: I'm using MVVM Light Toolkit
I came across this solution but it is a work around:
1- defining <ControlTemplatex:Key="Decorator" TargetType="ContentControl"> in App.xaml
2- in each page i want that template i just add <ContentControl Template="{StaticResource Decorator}">
Here is a little detailed sample:
App.xaml
<ControlTemplate x:Key="Decorator" TargetType="ContentControl">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="HeaderPanel" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Button x:Name="BackBtn" Grid.Column="0" />
<TextBlock Grid.Column="1" Text="{Binding Title}" />
</Grid>
<ContentPresenter Grid.Row="1" />
<Grid x:Name="BottomPanel" Grid.Row="2" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" />
<Button Grid.Column="1" />
<Button Grid.Column="2" />
<Button Grid.Column="3" />
</Grid>
</Grid>
</ControlTemplate>
Now in any xaml page i want to embed that content template i just add the following:
<ContentControl Template="{StaticResource Decorator}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="5*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Grid Title" />
<Grid x:Name="ContentGrid" Grid.Row="1">
</Grid>
</ContentControl>
Resource: http://www.codeproject.com/Articles/82464/How-to-Embed-Arbitrary-Content-in-a-WPF-Control
I created a project using the default Grid Template with VS2012, and added a button to the upper right hand corner and it is NOT clickable, and if I remove the GridView then it's clickable. Strange to me, could someone point out why this is the case
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
<Button
x:Name="SettingsButton"
Grid.Column="2"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,120,0"
AutomationProperties.Name="Settings"
Content="Settings"
Click="SettingsButton_Click"
/>
</Grid>
<GridView .... />
</Grid>
Your GridView is being drawn on top of your button grid. Move the button grid declaration below the GridView.
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Move the GridView Here -->
<GridView .... />
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
<Button
x:Name="SettingsButton"
Grid.Column="2"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,120,0"
AutomationProperties.Name="Settings"
Content="Settings"
Click="SettingsButton_Click"
/>
</Grid>
</Grid>