I have a Media element that I was trying to add buttons to by using the transport controls. The Media element's source is a live stream from a camera. I don't need any of the controls for playback.
I followed the documentation for adding a custom media element and it works, but the video covers up the button. When the video is not playing I can see the controls for what I assume is the state for if a video was streaming.
Here is my xaml code:
<Page
x:Class="RemoteUserUnity.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:RemoteUserUnity"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="White">
<SwapChainPanel x:Name="DXSwapChainPanel" CompositeMode="MinBlend" >
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<MediaElement x:Name="RemoteVideo" AreTransportControlsEnabled="True" RealTimePlayback="True" AudioCategory="Communications" Stretch="UniformToFill" Unloaded="MediaUnloaded" >
<MediaElement.TransportControls>
<local:CustomMediaTransportControls x:Name="customMTC"
Background="White"
Foreground="Blue"
Visibility="Visible"
IsFastForwardButtonVisible="False"
IsFastForwardEnabled="False"
IsFastRewindButtonVisible="False"
IsFastRewindEnabled="False"
IsPlaybackRateButtonVisible="False"
IsPlaybackRateEnabled="False"
IsSeekBarVisible="False"
IsSeekEnabled="False"
IsStopButtonVisible="True"
IsFullWindowButtonVisible="False"
IsFullWindowEnabled="False"
Circle="customMTC_Circle"
Arrow="customMTC_Arrow"
Clear="customMTC_Clear"
IsVolumeEnabled="False"
IsZoomButtonVisible="False"
IsZoomEnabled="False"
IsTextScaleFactorEnabled="False"
IsCompact="True" UseSystemFocusVisuals="True" />
</MediaElement.TransportControls>
</MediaElement>
</Grid>
<Grid x:Name="ExtendedSplashGrid" Background="White">
<Image x:Name="ExtendedSplashImage" Source="Assets/SplashScreen.png" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</SwapChainPanel>
</Page>
How can I the controls to the foreground?
Related
I have an iOS-specific issue that does not happen on Android.
If the page in an app is opened in landscape mode
and then turned to portrait the logo at the center of title bar instead of moving to the center goes off the page like this:
If it is opened in portrait and then turned to landscape then it does not move to the center or off the screen, but to the left, to be stuck around a quarter of full width.
Xaml:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PhotoApp.MobileApp.Views.PhotoGaleryPage">
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Accent">#96d1ff</Color>
</ResourceDictionary>
</ContentPage.Resources>
<Shell.TitleView>
<Image
HorizontalOptions="Center"
VerticalOptions="Center"
Source="logo.png" />
</Shell.TitleView>
I advise you to use this:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PhotoApp.MobileApp.Views.PhotoGaleryPage">
<ContentPage.Resources>
<ResourceDictionary>
<Color x:Key="Accent">#96d1ff</Color>
</ResourceDictionary>
</ContentPage.Resources>
<Shell.TitleView>
<StackLayout HorizontalOptions="Center"
Margin="{OnPlatform iOS='0,0,25,0', Android='0,0,20,0', Default=0}"
Orientation="Horizontal">
<Image
Source="logo.png" />
</StackLayout>
</Shell.TitleView>
Alike the above answer, you can take a try like this:
<ContentPage>
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
<Image Source="logo.png">
</Image>
</StackLayout>
</NavigationPage.TitleView>
...
</ContentPage>
Just take a StackLayout to wrap the image instead of putting it in Shell.TitleView directly.
Looks like the rotation in ios caused this problem as you take advantage of Image in Shell.TitleView directly. You can imagine this: it's really in center, but the screen can't display the whole title bar, which caused the problem you have seen.
When using the RadSideDrawer with a page-router-outlet in NativeScript, it seems that there is no way to not have the page-router-outlet fill 100% of the height on iOS. On Android, it works fine. The reason I'm running into this issue is because I'm trying to add a BottomNavigationBar below my router outlet. The images below show the behavior on both iOS and Android:
Here is my code:
<RadSideDrawer>
<FlexboxLayout tkDrawerContent>
<Button text="Test"></Button>
</FlexboxLayout>
<GridLayout class="main-grid" tkMainContent rows="*, auto">
<StackLayout row="0">
<page-router-outlet></page-router-outlet>
</StackLayout>
<BottomNavigationBar activeColor="white" inactiveColor="gray" backgroundColor="black" row="1">
<BottomNavigationTab title="First"></BottomNavigationTab>
<BottomNavigationTab title="Second"></BottomNavigationTab>
<BottomNavigationTab title="Third"></BottomNavigationTab>
</BottomNavigationBar>
</GridLayout>
</RadSideDrawer>
If I remove the page-router-outlet and put anything in it's place, it will then function correctly on both iOS and Android. Also, if I leave the page-router-outlet and remove the RadSideDrawer, it also functions correctly.
Any suggestions? Thanks!
EDIT:
It seems as if this issue only occurs when there are two page-router-outlets nested as in this sample playground:
https://play.nativescript.org/?template=play-ng&id=Z2a5Z7
Maybe page-router-outlets aren't supposed to be nested then? Right now I have a page-router-outlet in my app.component that lazy loads and switches between a login.component and my main app pages.component. pages.component contains the RadSideDrawer and the other page-router-outlet. I did this so I can lazy load my authorization pages and regular app content pages. Is this wrong?
It seems to be a issue with RadSideDrawer plugin (v8.0.0), the plugin is not open sourced so the best approach would be raising an issue in nativescript-ui-feedback and I see you have done that already - #1362.
I have a workaround that seem to fix the issue on my end.
MainComponent
constructor(page: Page) {
page.once(Page.navigatedToEvent, () => {
page.frame.requestLayout();
});
}
Request for relayout once the page is loaded.
Updated Playground
In my case, I have a modal page full height width over the side drawer, so I created a structure like below. Hope this helps you.
<GridLayout rows="" columns="" [class.dialogOpen]="dialogOpen">
<StackLayout>
<RadSideDrawer tkExampleTitle tkToggleNavButton drawerContentSize="320">
<StackLayout tkDrawerContent>
<app-sidenav></app-sidenav>
// my side drawer data
</StackLayout>
<GridLayout tkMainContent class="app" rows="auto,*,auto">
<GridLayout row="0" columns="*" rows="auto,auto" *ngIf="data.navbar" class="gradient">
// custom header
</GridLayout>
<!-- main content -->
<FlexboxLayout row="1">
<StackLayout #container>
<StackLayout [ngClass]="{'full': data.full }">
<ng-content></ng-content>
</StackLayout>
</StackLayout>
</FlexboxLayout>
<!-- Footer -->
<FlexboxLayout row="2" *ngIf="data.footer" class="app__footer" verticalAlignment="bottom">
// bottom tabs for my app
</FlexboxLayout>
</GridLayout>
</RadSideDrawer>
</StackLayout>
<StackLayout verticalAlignment="center" horizontalAlignment="center" height="100%" class="dialog__wrapper">
<AbsoluteLayout height="100%" backgroundColor="#FFFFFF" verticalAlignment="center" horizontalAlignment="center">
<!-- EDIT POPUP -->
<StackLayout class="dialog__container">
// cusotm dialog data
</StackLayout>
</AbsoluteLayout>
</StackLayout>
</GridLayout>
I need to put image as background in toolbar in Xamarin Forms in iOS project with master detail page and navigation bar (to have software back button in iOS). On android it works well but in iOS not good enough. I use this code in AppDelegate.cs:
UINavigationBar.Appearance.SetBackgroundImage(new UIImage("toolbar_iOS.jpg"), UIBarPosition.Any, UIBarMetrics.Default);
I put here image with pattern 400x125 pixels (less width - it displays 1 image and part of second image to the right, more pixels - image is zoomed). I want to have image displayed as aspect fill, because at page just under toolbar I have the same image with pattern and I want them exactly in the same size to match pattern.
Second way was to put an image in stack layout in Xamarin.Forms in NavigationPage.TitleView. I can modify aspect, but image is displayed only in about 70% of area of toolbar (it bypass hamburger icon and status bar), so it is not good.
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Layout.xxx.Views.MainMenuPage"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
xmlns:pages="clr-namespace:Layout.xxx.Views">
<MasterDetailPage.Master>
<pages:MainMenuPageMaster x:Name="MasterPage"/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:MainMenuPageDetail x:Name="DetailPage">
<NavigationPage.TitleView>
<Grid>
<ffimageloading:CachedImage Margin="-50,-30,0,0" Grid.Row="0" Source="background.jpg" Aspect="AspectFill" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
<StackLayout Grid.Row="0" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<StackLayout.Margin>
<OnPlatform x:TypeArguments="Thickness" iOS="-35,0,0,0" Android="-60,0,0,0"/>
</StackLayout.Margin>
<ffimageloadingsvg:SvgCachedImage Margin="0" Source="logo_svg.svg" Aspect="AspectFit" HeightRequest="40" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
</Grid>
</NavigationPage.TitleView>
</pages:MainMenuPageDetail>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Negative margins does not help. Is there another way to have control over toolbar image in iOS?
Use this code snippet , may help
<ContentPage>
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
<Image Source="iconXamagon.png">
<Image.GestureRecognizers>
<Image.TapGestureRecognizer
Tapped="HandleTapped" />
</Image.GestureRecognizers>
</Image>
<Label Text="3.2.0" FontSize="16" TextColor="Black" VerticalTextAlignment="Center" />
</StackLayout>
</NavigationPage.TitleView>
....
If you set HasBackButton="False" for the page it should cover the whole screen, just you will have to implement the back button or the hamburger button yourself.
I am using autocompletebox toolkit from windowsphone7.5 version. It works well in wp7.1 toolkit.
If I use autocompletion with inner control margin it's not worked properly, it shows the result on the top,
Here I attached the autocompletion error screenshot.
This is the code :
<Grid Grid.Row="1" Height="76" VerticalAlignment="Top">
<toolkit:AutoCompleteBox VerticalAlignment="Bottom" Width="400" ValueMemberBinding="{Binding Title}" HorizontalAlignment="Left" Grid.Row="0" x:Name="acBox" Margin="10,0,10,0" ItemsSource="{Binding CategoryListitems}">
<toolkit:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}"/>
</DataTemplate>
</toolkit:AutoCompleteBox.ItemTemplate>
</toolkit:AutoCompleteBox>
</Grid>
I am trying to get the Items in a ListBox to span the entire width of the ListBox. I have found several posts dealing with HorizontalContentAlignment="Stretch" but I have not been able to get it to work in my WP7 app. Here is my ListBox:
<ListBox Margin="8" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Collection}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" CornerRadius="3" Background="#FFE88D34"
BorderThickness="1" HorizontalAlignment="Stretch" >
<Grid Background="Transparent" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0" HorizontalAlignment="Stretch"
Margin="2"
FontSize="10"
Text="{Binding Property1}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
I am trying to get the orange Border to span the entire width of the listbox so that all the list items are the same size and not just the size of the text in the TextBlock.
Use the following static resource as ItemContainerStyle of Listbox:
ItemContainerStyle="{StaticResource ListboxStretchStyle}"
<Application.Resources>
<Style TargetType="ListBoxItem" x:Key="ListboxStretchStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
This is what I do use for that:
<ListBox Height="430" Margin="50,70,50,110" Name="myListBox" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="{StaticResource PhoneAccentBrush}" >
<TextBlock
Text="{Binding Text}"
FontSize="30"
Foreground="{StaticResource PhoneForegroundBrush}" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
more ore less found here: http://timdams.wordpress.com/2011/11/30/creating-a-wp7-app-listbox-items-of-the-same-width/
I believe this is a bug in the beta release, because HorizontalContentAlignment should be it.
as a workaround you might have to use a fixed width value.
Looks like John Gardner is on point with this being a bit of a defect in the Beta. It works fine in "plain old" Silverlight, but yields oddly-centered areas in the Phone. It is easy enough to work past, however.
Get rid of / comment out the ListBox.ItemContainerStyle entry in your listbox, above.
In Blend, select your ListBox in the Objects and Timeline panel, right click, and select Edit Additional Templates / Edit Generated Item Container (ItemContainerStyle) / Edit a Copy... Choose a name/key and location for the new style resource.
Locate the ContentContainer control, and set its Horizontal Content Alignment to Bind to the Horizontal Content Alignment set in the item consuming this template, (HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ) as follows:
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
Once you've told the ContentControl how it should align its (ahem) content, the results should be what you expected.