I have 2 different values for the Left Margin and the Right Margin for my application. (Let say 27 and 64)
Is it possible to get these values from the ResourcesDictionaty and set them in my XAML.
For example
<StackLayout Margin="{Left1},0,{Right1},0">
</StackLayout>
You can specify them as double values in ResourceDictionary and refer to them in other resources/styles or at element level itself.
Sample resource-dictionary
<ResourceDictionary>
<!-- namespace declaration
xmlns:sys="clr-namespace:System;assembly=System.Runtime" -->
<sys:Double x:Key="leftMargin">20</sys:Double>
<sys:Double x:Key="rightMargin">30</sys:Double>
<Thickness x:Key="MyMargin1"
Left="{StaticResource leftMargin}"
Right="{StaticResource rightMargin}"
Top="20"
Bottom="30" />
<Thickness x:Key="MyMargin2"
Left="{StaticResource leftMargin}"
Right="{StaticResource rightMargin}"
Top="5"
Bottom="15" />
</ResourceDictionary>
Sample usage
<StackLayout>
<BoxView BackgroundColor="Blue" Margin="{StaticResource MyMargin1}" />
<BoxView HeightRequest="1" BackgroundColor="Black" />
<BoxView BackgroundColor="Red" Margin="{StaticResource MyMargin2}" />
<BoxView HeightRequest="1" BackgroundColor="Black" />
<BoxView BackgroundColor="Yellow">
<BoxView.Margin>
<Thickness
Left="{StaticResource leftMargin}"
Right="{StaticResource rightMargin}"
Top="30"
Bottom="10" />
</BoxView.Margin>
</BoxView>
<BoxView HeightRequest="1" BackgroundColor="Black" />
</StackLayout>
I don't think doing this for individual values will work. You can however bind the entire Margin to a value in a resource dictionary as follows:
<ResourceDictionary>
<Thickness x:Key="MyMargin">27,0,64,0</Thickness>
</ResourceDictionary>
<StackLayout Margin="{StaticResource MyMargin}">
</StackLayout>
Related
I have to opacify (make semi-transparent) the background image with a colored veil, I tried adding a frame but I don't get the desired effect`
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:viewmodels="clr-namespace:GET_SOUND_V2.ViewModels" x:DataType="viewmodels:LoginViewModel"
mc:Ignorable="d"
x:Class="GET_SOUND_V2.Views.LoginPage"
BackgroundImage="maco.jpg">
<ContentPage.Content>
<Frame BorderColor="Transparent" Opacity="0.7">
<Frame.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="#1d57a8"
Offset="0.1"/>
<GradientStop Color="#1d57a8"
Offset="1.0"/>
</LinearGradientBrush>
</Frame.Background>
<StackLayout Orientation="Vertical" Padding="30" Spacing="40">
<BoxView HeightRequest="30"/>
<StackLayout Orientation="Vertical">
<Entry x:Name="txtUserName" Text="{Binding UserName}" HorizontalTextAlignment="Center" Placeholder="UserName"
PlaceholderColor="White" HeightRequest="40"
Keyboard="Email"
TextColor="White"
Focused="BiometricCredentials" />
<Entry x:Name="txtPassword" Text="{Binding Password}" HorizontalTextAlignment="Center" Placeholder="Password"
PlaceholderColor="White" HeightRequest="40"
IsPassword="True"
TextColor="White"/>
</StackLayout>
<Button Command="{Binding SubmitCommand}" Text="Accedi" TextColor="White" CornerRadius="50"
FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand"
Margin="0,0,0,150" BackgroundColor="#EF7F1A" />
</StackLayout>
</Frame>
</ContentPage.Content>
</ContentPage>
I would like the elements, however, not to be affected by the opacity value (still be fully opaque), any advice on how I could do?
One approach is to "overlay" two elements over each other, using a single-cell Grid.
The "underneath" item is the image (with opacity applied).
The "top" item is the rest of your layout.
.
<Grid>
<Frame ...>
...
</Frame>
<StackLayout ...>
...
</StackLayout>
</Grid>
Notice that StackLayout is no longer inside Frame. Because no Grid.Row or Grid.Column is specified on these two elements, they both are at Row=0, Column=0. Hence, overlaid one on top of the other.
May need to add properties to <Grid> element, to get desired size, etc. But start with what I show, see what happens.
I think i have tried everything possible but i'm also sure that i have the nose too close from the window to see clearly after 5 days trying constraining the expansion of the scrollviewer. I would like it to remain under the stact layout of the thumbnail viewer. Represented by the red line. Any help or solution would be greatly appreciated.
<?xml version="1.0" encoding="UTF-8" ?>
<Frame
x:Class="EchoMessager.Pages.ListeMessages.MessageEditor"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:resx="clr-namespace:EchoMessager.Resx"
xmlns:k="clr-namespace:EchoMessager;assembly=EchoMessager"
xmlns:local="clr-namespace:EchoMessager"
xmlns:ctrls="clr-namespace:EchoMessager.Controls;assembly=EchoMessager"
xmlns:ctrl="clr-namespace:EchoMessager.Controls.MessageEditor;assembly=EchoMessager"
x:Name="EditorControlsPresenterContainer"
VerticalOptions="End">
<FlexLayout
Direction="Column"
JustifyContent="End">
<!-- Thumbnail Presenter -->
<StackLayout
x:Name="ThumbnailPlaceHolder"
Margin="0"
Padding="0"
Orientation="Vertical"
VerticalOptions="End"
Spacing="0"
BackgroundColor="#545454">
<ctrls:CloseOpenSwitch
x:Name="PreviewPresenterControlSwith"
IsVisible="True"
VerticalOptions="End"
State="disabled" />
<!-- Row #2 - Thumbnails Viewer Implementation -->
<CollectionView
x:Name="ThumbnailsPresenter"
Margin="0"
VerticalOptions="End"
SelectionMode="Single"
IsVisible="true"
HeightRequest="95"
MinimumHeightRequest="95"
ItemSizingStrategy="MeasureAllItems"
HorizontalScrollBarVisibility="Never"
VerticalScrollBarVisibility="Never">
<CollectionView.ItemsLayout>
<LinearItemsLayout
Orientation="Horizontal"
SnapPointsType="MandatorySingle"
SnapPointsAlignment="Center"
ItemSpacing="8" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="{x:Type ctrl:ThumbnailModel}">
<Image
Margin="1"
Aspect="AspectFit"
Source="{Binding Thumbnail, Mode=OneWay}">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding OpenCommand, Mode=OneWay}" />
</Image.GestureRecognizers>
</Image>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
<!-- Editor Row -->
<StackLayout
x:Name="EditorControlsPresenter"
Margin="0"
Padding="0"
BackgroundColor="GreenYellow"
Orientation="Horizontal"
VerticalOptions="End">
<Image
x:Name="cameraButton"
Margin="0"
VerticalOptions="Center"
FlexLayout.AlignSelf="Start"
WidthRequest="60"
HeightRequest="60"
BackgroundColor="Transparent"
Source="camerabutton.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnPrendrePhoto" />
</Image.GestureRecognizers>
</Image>
<ScrollView
x:Name="MessagesViewScrollingArea"
Margin="0"
Padding="0"
HorizontalOptions="StartAndExpand"
VerticalOptions="End"
VerticalScrollBarVisibility="Never"
HorizontalScrollBarVisibility="Never">
<!-- What is about to be scroll -->
<Editor
x:Name="EntrerMessage"
Margin="0"
VerticalOptions="End"
FlexLayout.Grow="1"
AutoSize="TextChanges"
Keyboard="Default"
MaxLength="1500"
Placeholder="{x:Static resx:AppResources.MessageEntryPlaceholder}"
Text="{Binding Message.Texte, Mode=TwoWay}"
Unfocused="EntrerMessage_OnUnfocused"
FontSize="{OnPlatform Default=Default,
Converter={StaticResource FontNamedSizeToDouble}}">
</Editor>
</ScrollView>
<AbsoluteLayout
HorizontalOptions="End"
VerticalOptions="Center">
<Image
x:Name="envoyerMessageButton"
Margin="0"
HeightRequest="60"
WidthRequest="60"
Source="sendbutton.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnSendMessage" />
</Image.GestureRecognizers>
</Image>
<ActivityIndicator
x:Name="activityIndicator"
Margin="0"
HeightRequest="60"
WidthRequest="60"
IsRunning="false"
IsVisible="false"
Opacity="0.8"
Color="Black" />
</AbsoluteLayout>
</StackLayout>
<!-- Editor tools -->
<!-- Bouton Coller -->
<Button
x:Name="boutonCollerMessage"
Margin="0"
Padding="10,0"
IsVisible="false"
FontSize="Micro"
BackgroundColor="Blue"
FlexLayout.AlignSelf="Stretch"
VerticalOptions="CenterAndExpand"
Text="Coller le message"
Clicked="OnCollerMessage" />
</FlexLayout>
</Frame>
Ok, there is a seriously strange bug with xamarin.forms and we found around here that fwe must put this proporty to true on a stacklayout containing many children to make allow it to behave as expected. simply add stacklayoutname.IsTabStop=False;
I have a Master-Detail Page in my project, I've set the phone language to Arabic and everything is working fine the master page is on the right and the icon is on the right. But the thing is the TitleView (toolbaritems) are pushed a little bit to the right when the phone is set to Arabic. I tried this without Master-Detail page project and the TitleView is working fine and it is in the exact place.
With Master Detail Page:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:AppXamarin.Pages"
x:Class="AppXamarin.Pages.MasterMainPage" NavigationPage.HasNavigationBar="False" NavigationPage.HasBackButton="False" FlowDirection="{x:Static Device.FlowDirection}">
<MasterDetailPage.Master>
<local:MasterPage x:Name ="masterPage" FlowDirection="{x:Static Device.FlowDirection}"/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage FlowDirection="{x:Static Device.FlowDirection}">
<x:Arguments>
<local:MenuPage></local:MenuPage>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
MenuPage Xaml file:
<NavigationPage.TitleView>
<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="EndAndExpand" FlowDirection="{x:Static Device.FlowDirection}">
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="cart_Clicked"/>
</Grid.GestureRecognizers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="BadgeIconImage" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="6" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="cart">
<Image.HeightRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.HeightRequest>
<Image.WidthRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.WidthRequest>
</Image>
<Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="12" Padding="10,4" HasShadow="false" OutlineColor="Transparent" BackgroundColor="Transparent">
<Label x:Name="BadgeTextLabel" FontSize="12" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextColor="#FF0000"/>
</Frame>
</Grid>
</NavigationPage.TitleView>
Result:
Without Master Detail Page:
<NavigationPage.TitleView>
<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="EndAndExpand" FlowDirection="{x:Static Device.FlowDirection}">
<!--<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="cart_Clicked"/>
</Grid.GestureRecognizers>-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image x:Name="BadgeIconImage" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="6" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="cart">
<Image.HeightRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.HeightRequest>
<Image.WidthRequest>
<OnIdiom Phone="25" Tablet="35"/>
</Image.WidthRequest>
</Image>
<Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="12" Padding="10,4" HasShadow="false" OutlineColor="Transparent" BackgroundColor="Transparent">
<Label x:Name="BadgeTextLabel" FontSize="12" FontAttributes="Bold" HorizontalOptions="EndAndExpand" TextColor="#FF0000"/>
</Frame>
</Grid>
<!--</Grid>-->
</NavigationPage.TitleView>
Result:
My understanding tells me you are trying to add toolbar items so you do not use titleView for that:
What you should be doing, on the other hand, is something like below
C#:
this.ToolbarItems.Add(new ToolbarItem()
{
Icon = "BadgeIconImage",
Command = YourCommand,
});
XAML:
<ContentPage.ToolbarItems>
<ToolbarItem Order="Primary" Icon="BadgeIconImage" />
</ContentPage.ToolbarItems>
To understand Xamarin Forms Toolbar check this guide by Adam Pedley
Update
I have a feeling that the padding that you are using on the Frame is what's pushing your View
Padding="10,4"
Check this:
<Frame x:Name="BadgeFrame" Grid.Row="0" Grid.Column="1" CornerRadius="12" Padding="10,4" HasShadow="false" OutlineColor="Transparent" BackgroundColor="Transparent">
Also could be the corner radius.
Yes I did it
manifest :
<application android:label="Sanaap" android:icon="#mipmap/launcher_foreground" android:theme="#style/MainTheme" android:supportsRtl="true">
MainView.xaml
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Sanaap.App.Views.MenuView"
FlowDirection="RightToLeft"
Title="Main">
In line 1, my axml file reports the error Sequence contains no elements ...
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:my_namespace"
x:Class="my_class_name"
Title="Login"
NavigationPage.HasNavigationBar="false">
<ContentPage.Content>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
<ContentView Padding="0,40,0,40" VerticalOptions="FillAndExpand">
<Image Source="xamarin_logo.png" VerticalOptions="Center" HeightRequest="64" />
</ContentView>
</StackLayout>
<StackLayout Spacing="10" Padding="20" VerticalOptions="Center">
<Entry x:Name="companyNameEntry" Placeholder="Nome Società " Text="TERMINALINI" />
<Entry x:Name="usernameEntry" Placeholder="ID Utente" Text="manager" />
<Entry x:Name="passwordEntry" Placeholder="Password" IsPassword="true" Text="XXX" />
<Button Text="Login" TextColor="White" BackgroundColor="#77D065" Clicked="OnLoginButtonClicked" />
<Label x:Name="messageLabel" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
I tried what the error meant but I do not understand it ... what did I do wrong?
A ContentPage's Content property can only contain a single child. You have two StackLayouts as direct children of Content. They need to be enclosed in a single layout container.
I am trying to get the similar popup as below on Androd, see the X close button is nicely lays on top of the frame. I copied code from the github to test but actual code is also not working. half of the button is always behind the frame. I thought that first added control goes below and 2nd one comes above if their position lays on each other. is there any exception here? whatever I tried i couldnt set button obove the frame. Can somebody sheds some light on usage of absolutelayout here?
<ScrollView
HorizontalOptions="Center"
VerticalOptions="Center">
<AbsoluteLayout>
<Frame
x:Name="FrameContainer"
Margin="15"
HorizontalOptions="Center"
BackgroundColor="White">
<StackLayout
IsClippedToBounds="True"
Padding="10, 5"
Spacing="3">
<Image
HorizontalOptions="Center"
x:Name="OctocatImage"
Margin="10"
HeightRequest="150"
WidthRequest="150">
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
Android="github_octocat.png"
iOS="github_octocat.png"
WinPhone="Assets/github_octocat.png"/>
</Image.Source>
</Image>
<Entry
HorizontalOptions="Center"
x:Name="UsernameEntry"
Style="{StaticResource EntryStyle}"
Placeholder="Username" />
<Entry
HorizontalOptions="Center"
x:Name="PasswordEntry"
Style="{StaticResource EntryStyle}"
Placeholder="Password"
IsPassword="True"/>
<Button
Margin="10, 5"
BackgroundColor="#7dbbe6"
HorizontalOptions="Fill"
Clicked="OnLogin"
x:Name="LoginButton"
Text="Login">
<Button.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" Android="50" iOS="30" WinPhone="30"/>
</Button.HeightRequest>
</Button>
</StackLayout>
</Frame>
<ContentView
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="OnCloseButtonTapped"/>
</ContentView.GestureRecognizers>
<Image
x:Name="CloseImage"
HeightRequest="30"
WidthRequest="30">
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
Android="close_circle_button.png"
iOS="close_circle_button.png"
WinPhone="Assets/close_circle_button.png"/>
</Image.Source>
</Image>
</ContentView>
</AbsoluteLayout>
</ScrollView>
I just tried with a fresh project and below is how it looks like for me. Close button is always behind the frame. here you can find repro test project
Removed Frame and moved some attributes onto StackLayout. Related bug
https://bugzilla.xamarin.com/show_bug.cgi?id=55744
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:test"
x:Class="test.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="EntryStyle" TargetType="Entry">
<Setter Property="PlaceholderColor" Value="#9cdaf1"/>
<Setter Property="TextColor" Value="#7dbbe6"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<ScrollView
HorizontalOptions="Center"
VerticalOptions="Center">
<AbsoluteLayout>
<StackLayout Margin="15" BackgroundColor="White"
IsClippedToBounds="True"
Padding="10, 5"
Spacing="3">
<Image
HorizontalOptions="Center"
x:Name="OctocatImage"
Margin="10"
HeightRequest="150"
WidthRequest="150">
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
Android="icon.png"
/>
</Image.Source>
</Image>
<Entry
HorizontalOptions="Center"
x:Name="UsernameEntry"
Style="{StaticResource EntryStyle}"
Placeholder="Username" />
<Entry
HorizontalOptions="Center"
x:Name="PasswordEntry"
Style="{StaticResource EntryStyle}"
Placeholder="Password"
IsPassword="True"/>
<Button
Margin="10, 5"
BackgroundColor="#7dbbe6"
HorizontalOptions="Fill"
x:Name="LoginButton"
Text="Login">
<Button.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" Android="50" iOS="30" WinPhone="30"/>
</Button.HeightRequest>
</Button>
</StackLayout>
<ContentView
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
<Image
x:Name="CloseImage"
HeightRequest="30"
WidthRequest="30">
<Image.Source>
<OnPlatform
x:TypeArguments="ImageSource"
Android="close_circle_button.png"
/>
</Image.Source>
</Image>
</ContentView>
</AbsoluteLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
It's a bug, set HasShadow="False" on your Frame and it should work.