I am new in Xamarin hybrid application. How to apply diagonal cut view in the image?
I have created the diagonal view from the below code.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PEMS.Views.Profile"
xmlns:xamvvm="clr-namespace:Xamvvm;assembly=Xamvvm.Forms"
xmlns:xfShapeView="clr-namespace:XFShapeView;assembly=XFShapeView"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
Title="CornersTransformation" BackgroundColor="White">
<AbsoluteLayout HorizontalOptions="FillAndExpand" BackgroundColor="White" VerticalOptions="FillAndExpand">
<ffimageloading:CachedImage
AbsoluteLayout.LayoutBounds="0,0,1,.5"
AbsoluteLayout.LayoutFlags="All"
Aspect="AspectFill"
Source="profile_background.png"
/>
<xfShapeView:ShapeView
AbsoluteLayout.LayoutBounds="1,.5,400, 1600"
AbsoluteLayout.LayoutFlags="PositionProportional"
HorizontalOptions="Center"
Rotation="-90"
ShapeType="Triangle"
WidthRequest="400"
Color="White" />
<Label
AbsoluteLayout.LayoutBounds=".6,.6,.5,.1"
AbsoluteLayout.LayoutFlags="All"
FontSize="34"
HorizontalOptions="End"
LineBreakMode="WordWrap"
Text="Some content here."
TextColor="White" />
</AbsoluteLayout>
</ContentPage>
What exactly do you mean by diagonal cut view in the image? Can you provide example or mockup?
This library is excellent for all the image transformations and caching, but since its unclear, I am not sure if it can help you.
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 am trying to place a synfcusion button that has a calendar image near a xarmain forms entry box.
But its a bit out of alignment what I have tried so far is.
<Label Text="Please select a start date below"></Label>
<StackLayout Orientation="Horizontal">
<Entry x:Name="txtDateStartEntry" WidthRequest="200" ></Entry>
<syncfusion:SfButton x:Name="btnPickStartDate" CornerRadius="10" HorizontalTextAlignment="Start" ShowIcon="True" Clicked="btnPickStartDate_Clicked" FontSize="24" BorderThickness="2" TextColor="White" BackgroundColor="White" Text="..." >
<syncfusion:SfButton.Content>
<Grid ColumnDefinitions="Auto, *, Auto" ColumnSpacing="16" Padding="16">
<Image Grid.Column="1" HorizontalOptions="End" WidthRequest="30" HeightRequest="30" Source="cal16.png" VerticalOptions="End"/>
</Grid>
</syncfusion:SfButton.Content>
</syncfusion:SfButton>
</StackLayout>
What I have eneded up with is this.
As you can see its a bit far away from the entry field and doesnt look like it belongs.
If you're using Syncfusion, you should make use of SfTextInputLayout which provides leading/trailing view functionality for the express purpose of adding descriptive iconography to an input view.
Code example assumes importing the following xmlns:
xmlns:sftl="clr-namespace:Syncfusion.XForms.TextInputLayout;assembly=Syncfusion.Core.XForms"
<sftl:SfTextInputLayout TrailingViewPosition="Inside">
<Entry x:Name="txtDateStartEntry" WidthRequest="200" />
<sftl:SfTextInputLayout.TrailingView>
<Image HeightRequest="30" Source="cal16.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="btnPickStartDate_Clicked" />
</Image.GestureRecognizers>
</Image>
<sftl:SfTextInputLayout.TrailingView>
</sftl:SfTextInputLayout>
Note: when using LeadingView or TrailingView, it's recommended to not assign a Width value as Syncfusion will calculate the width based on the height you request to maintain aspect ratio of the specified view. Therefore I have intentionally excluded HeightRequest from the Image.
I want to write an app for Android with Xamarin.Forms and i want an ImageButton like in this question: How to make a Floating Action Button in Xamarin Forms
The problem is as soon as i set the Background of the Button the Image is not displayed correctly. The Button is on the upper left corner of the Image and the Image is super big. The Button is shown correctly.
This is my Xaml with the Button:
<?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:android="http://schemas.android.com/apk/res/android"
mc:Ignorable="d"
x:Class="ASUE.Views.ItemsPage"
Title="AllItems"
x:Name="BrowseItemsPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Archive" Clicked="Archive_Clicked"/>
</ContentPage.ToolbarItems>
<AbsoluteLayout>
<ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout>
<ListView x:Name="ItemsListView"
ItemsSource="{Binding Items}"
VerticalOptions="FillAndExpand"
HasUnevenRows="true"
RefreshCommand="{Binding LoadItemsCommand}"
IsPullToRefreshEnabled="true"
IsRefreshing="{Binding IsBusy, Mode=OneWay}"
CachingStrategy="RecycleElement"
ItemSelected="OnItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10" BackgroundColor="{Binding BColor, FallbackValue='White'}">
<Label Text="{Binding Title}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemTextStyle}"
FontSize="16" />
<Label Text="{Binding ActionTime}"
LineBreakMode="NoWrap"
Style="{DynamicResource ListItemDetailTextStyle}"
FontSize="13" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
<ImageButton Source="add.png" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".95,.95,80,80" BackgroundColor="Transparent"/>
</AbsoluteLayout>
</ContentPage>
I expect the Image to be the same size as the Button
Update
I tried This
<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"
BackgroundColor="Accent"
CornerRadius="80"/>
This
<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"
BackgroundColor="Accent"
CornerRadius="80"
Padding="0,0,75,75"/>
This
<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"/>
and This
<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".1,.1,80,80"
CornerRadius="80"/>
You need to set CornerRadius to have a circle button. You also need to set the Padding property to make your image smaller:
<ImageButton Source="add.png"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".95,.95,80,80"
CornerRadius="80"
Padding="15"
BackgroundColor="Accent"/>
where add.png is:
You can get it here: https://material.io/resources/icons/?search=add&icon=add&style=baseline
in black or white
i just limit its width and height like this,is it the effect you want ?:
<ImageButton Source="add.png"
HorizontalOptions="Center"
VerticalOptions="Center"
CornerRadius="25"
WidthRequest="50"
HeightRequest="50"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".95,.95,80,80"
BackgroundColor="Accent"/>
Thanks for all your help but nothing of this works sadly.
So i just made a normal button with the picture as ImageSource and resized the picture correctly to fit the button.
I've got following view:
<ContentPage.Content>
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout VerticalOptions="CenterAndExpand" Margin="20, 0, 20, 0">
<StackLayout>
<Label Text="Login" HorizontalOptions="CenterAndExpand" />
<Entry Text="{Binding Login, Mode=OneWayToSource}"></Entry>
</StackLayout>
<StackLayout>
<Label Text="Hasło" HorizontalOptions="CenterAndExpand" />
<Entry IsPassword="True" Text="{Binding Password, Mode=TwoWay}"></Entry>
</StackLayout>
<Button Text="Zaloguj się" Command="{Binding SignInCommand}"></Button>
</StackLayout>
</StackLayout>
<BoxView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" BackgroundColor="Gray" Opacity="0.5" InputTransparent="false" IsVisible="{Binding IsBusy}" />
<ActivityIndicator IsRunning="{Binding IsBusy}" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
</AbsoluteLayout>
</ContentPage.Content>
I want to move BoxView and ActivityIndicator to external control to make reusable component. The problem is that to achieve this I need to "group" these controls to obtain one child element.
The question is if is there any element I can use to group my controls, but which will not affect the way how controls are displayed? Alternatevlly which element I can use and how to still have effect of overlay over whole page and loading indicator?
I was trying to use AbsoluteLayout, StackLayout etc. but I couldn't position it to persist initial effect (overlay on whole page and loading indicator in the center with opacity = 1).
You can use DependencyService and reuse it in any page.
Check this tutorial.
There is also a working sample.
Actually I am trying to show a Master Detail Page with Menu button on right side. I am not getting any option to present a Page modally from right to left and same dismiss also left to right. Can anyone help me on this.
You can use FlowDirection
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RTL.MasterDetailPage"
Padding="25"
FlowDirection="RightToLeft">
<MasterDetailPage.Master>
<ContentPage Title=" ">
<StackLayout>
<Button Text="Menu item" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage>
<Label Text="My page"/>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
https://blog.xamarin.com/right-to-left-localization-xamarin-forms/
Better work around is,
Disable Navigation tool bar,
NavigationPage.SetHasNavigationBar(this, false);
Create custom tool bar with Hamburger image,
<StackLayout Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
<Image Source="hamburger" Margin="2,0,0,0" HeightRequest="35" WidthRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ToggleMasterCommand}" CommandParameter="1"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
<Label Text="Header text" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand" VerticalTextAlignment="Center"/>
<Image Source="notification" HeightRequest="30" WidthRequest="30">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NotificationCommand}"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>
</StackLayout>
Apply FlowDirection for each page. either Xaml or code behind through Visual Element
You can see a demo for setting Visual Element through code behind here