I am developing a Xamarin.Form application which is adding some text to an image, and I have to save that image to gallery. Can someone help me what is the best way to do that?
NB: I have 3 text sentence to add in the image text sentence are fixed position. Kindly find the sample/example given below.
So far i have added the text (code given below) to my image and given the position to it. Now i have to save that image to gallery.
<AbsoluteLayout Grid.Row="0" MinimumHeightRequest="370" HorizontalOptions="Center" VerticalOptions="Center">
<Image x:Name="backgroundImage" Source="wcc_background.jpg" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="Start" Aspect="AspectFit"/>
<Grid x:Name="grdView" HeightRequest="370" WidthRequest="370" HorizontalOptions="Center" VerticalOptions="Start" >
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="120" />
</Grid.ColumnDefinitions>
<StackLayout Padding="0,0,40,0" HorizontalOptions="End" VerticalOptions="End" Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" >
<Label Text="{Binding Item.Title}" HorizontalOptions="End" VerticalOptions="End" Font="Bold,Medium" />
</StackLayout>
<StackLayout HorizontalOptions="End" VerticalOptions="FillAndExpand" Grid.Row="1" Grid.Column="0">
<Label VerticalTextAlignment="End" HorizontalTextAlignment="End" XAlign="End" Text="{Binding Item.Description}" Font="Small" />
</StackLayout>
<StackLayout HorizontalOptions="Center" VerticalOptions="Start" Grid.Row="2" Grid.Column="1">
<Label Text="Reference" Font="Micro" />
</StackLayout>
<StackLayout HorizontalOptions="End" VerticalOptions="Start" Grid.Row="2" Grid.Column="0">
<Label Text="{Binding Item.Reference}" Font="Micro" />
</StackLayout>
</Grid>
</AbsoluteLayout>
Related
I am trying to make a list of Entry fields that is loaded N times, with some text and comments together.
This is my layout
And when the text is typed I am trying to make a suggestion of text back from a predefined text collection but, the suggestion layout push all the controls below but not get over top.
This is how the suggested text will look like
I tried using absolute layout but actually cannot get what I am wanting. Each Enter Text has its suggestion and since there can be N times. So I want to fix it for all some text. And all have different text suggestion length.
<StackLayout BindableLayout.ItemsSource="{Binding MyTextList}" VerticalOptions="FillAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame Margin="0,10,0,10" Padding="0" HasShadow="False" BackgroundColor="Transparent">
<Grid Margin="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Vertical" Grid.Column="0" Grid.Row="0" HorizontalOptions="FillAndExpand">
<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid Margin="0" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<Grid.RowDefinitions>
<RowDefinition Height="auto" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label Text="{x:Static Rec:VestParkResource.SomeText}" TextColor="Black" FontAttributes="Bold" Grid.Column="0" Grid.Row="0" />
<Frame Grid.Column="0" Grid.Row="1" Padding="5"
BorderColor="{StaticResource GrayBorderColor}" CornerRadius="30"
HeightRequest="55" HorizontalOptions="FillAndExpand" >
<controls:BorderlessEntry TextTransform="Uppercase"
Text="{Binding Text}"
Index = "{Binding Index}"
TextChanged ="SuggestShow" Completed="SuggestShow"
MaxLength="50" x:Name="LicensePlate" Keyboard="Text"
Placeholder="{x:Static Rec:VestParkResource.SomeText}"
FontFamily="OpenSansRegular" />
</Frame>
</Grid>
<StackLayout BindableLayout.ItemsSource="{Binding SuggestedText}" BindableLayout.EmptyView="No Suggestions"
x:Name="SuggestedTextView" Orientation="Vertical" IsVisible="{Binding IsVisible}"
BackgroundColor="White"
AbsoluteLayout.LayoutBounds="0,65,1,1" AbsoluteLayout.LayoutFlags="None">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout BackgroundColor="White" Padding="5" Margin="0" >
<Label Text="{Binding .}" FontSize="16" TextColor="#FF464859"/>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</AbsoluteLayout>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label Text="{x:Static Rec:VestParkResource.Comment}" TextColor="Black" FontAttributes="Bold" Grid.Column="0" Grid.Row="0" />
<Frame Grid.Column="0" Grid.Row="1" Padding="5" HasShadow="False" BorderColor="{StaticResource GrayBorderColor}" CornerRadius="30" HeightRequest="55" HorizontalOptions="FillAndExpand">
<controls:BorderlessEntry
TextTransform="Uppercase"
Text="{Binding Comment}"
MaxLength="50" x:Name="Comment" Keyboard="Text"
Placeholder="{x:Static Rec:VestParkResource.Comment}"
FontFamily="OpenSansRegular" />
</Frame>
</Grid>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
I have tried different combination of Absolute Layout's LayoutFlags and LayoutBounds but cannot achieve what I want. Can any one how can I achieve it? If it is possible using something other than absolute layout then please suggest.
I am using the swipe card in the Xamarin form.
The Problem is i am unable to execute the tap event inside the card.
This is my Xaml code --
<swipecards:CardStackView
Grid.Row="0"
x:Name="CardStackView"
ItemsSource="{Binding Cards[0]}"
Swiped="CardStackView_Swiped"
StartedDragging="CardStackView_dragged"
Margin="20"
BackgroundColor="#E0E0E0"
Focused="CardStackView_Focused">
<swipecards:CardStackView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="1" ColumnSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout
Orientation="Horizontal"
Grid.Row="0"
Grid.ColumnSpan="2">
<Label
Text="{Binding .FullJobName}"
HorizontalOptions="Start"
Style="{StaticResource TitleLabel}"/>
<Grid VerticalOptions="Start">
<Image
x:Name="MyImage"
Source="{Binding .CompanyProfImg}"
HorizontalOptions="FillAndExpand"
Aspect="AspectFit" />
<ActivityIndicator
BindingContext="{x:Reference MyImage}"
IsRunning="{Binding IsLoading}}"/>
</Grid>
</StackLayout>
<StackLayout Grid.Row="1" Grid.ColumnSpan="2">
<Label
Text="{Binding .LocationName}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
<Label
Text="{Binding .TotalSalary }"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="2" Grid.ColumnSpan="2">
<Label
Text="Comapny Name"
Style="{StaticResource TitleLabel}"
HorizontalOptions="StartAndExpand"/>
<Label
Text="{Binding .CompanyName}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="3" Grid.ColumnSpan="2">
<Label
Text="Key Skills"
Style="{StaticResource TitleLabel}"
HorizontalOptions="StartAndExpand"/>
<Label
Text="{Binding .Skills}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="4" Grid.ColumnSpan="2">
<Label
Text="Job Description"
Style="{StaticResource TitleLabel}"
HorizontalOptions="StartAndExpand"/>
<Label
Text="{Binding .Description}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="5" Grid.ColumnSpan="2">
<BoxView Color="#DCDCDC" HeightRequest="2" />
<StackLayout Orientation="Horizontal">
<Label
Text="{Binding .Postedby}"
HorizontalOptions="Start"
Style="{StaticResource label_med}"/>
<Image x:Name="More_Option" Source="more.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding TapCommand}"
CommandParameter="Image1"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
</Grid>
</DataTemplate>
</swipecards:CardStackView.ItemTemplate>
</swipecards:CardStackView>
and ViewModel looks like this--
private ICommand tapCommand;
public ICommand TapCommand
{
get { return tapCommand; }
set
{
OnTapped(this.tapCommand);
}
}
void OnTapped(object s)
{
}
what is wrong with my code?I have also tried the normal approach the normal tap event.but that was not also working.
i am refering this link -- Link
Thank you guys.
I'm writing an xamarin forms app. I have A ListView with custom cell (xaml):
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Clicked="Btn_delete_Clicked" CommandParameter="{Binding .}" Text="Удалить" IsDestructive="True" />
</ViewCell.ContextActions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding Image}" Grid.Row="0" Grid.Column="0" Margin="5" VerticalOptions="Center"
HorizontalOptions="Center" Aspect="AspectFit" WidthRequest="170" HeightRequest="170" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Btn_fullscr_Clicked" />
</Image.GestureRecognizers>
</Image>
<Entry x:Name="EditTextPhoto" Placeholder="[Комментарий отсутствует]" Grid.Row="1" Grid.Column="0"
Margin="5" VerticalOptions="FillAndExpand" HorizontalOptions="Fill" FontSize="14"
Text="{Binding Comment}" BackgroundColor="#44104e8b" IsEnabled="{Binding IsPreview}" TextColor="Black" HorizontalTextAlignment="Center" />
</Grid>
</ViewCell>
As you can see, I have ContextActions and a TapGestureRecognizer for my Image.
A have a bug on android: if you click on a view cell, the contextaction appears. ContextAction has to be done only on long press, as you know. But when I remove gesturerecognizer from Image, everything works fine.
Does anybody know how to workaround this issue? Thanks in advance.
Finally I've found a workaround for this issue. I added a transparent button in the same row where my image is and deleted tapgesturerecognizer. So the final code is:
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Clicked="Btn_delete_Clicked" CommandParameter="{Binding .}" Text="Удалить" IsDestructive="True" />
</ViewCell.ContextActions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding Image}" Grid.Row="0" Grid.Column="0" Margin="5" VerticalOptions="Center"
HorizontalOptions="Center" Aspect="AspectFit" WidthRequest="170">
</Image>
<Button Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" Clicked="Btn_fullscr_Clicked"
WidthRequest="170" VerticalOptions="FillAndExpand" BackgroundColor="Transparent" BorderColor="Transparent" />
<Entry x:Name="EditTextPhoto" Placeholder="[Комментарий отсутствует]" Grid.Row="1" Grid.Column="0"
Margin="5" VerticalOptions="FillAndExpand" HorizontalOptions="Fill" FontSize="14"
Text="{Binding Comment}" IsEnabled="{Binding IsPreview}" TextColor="Black" HorizontalTextAlignment="Center" />
</Grid>
</ViewCell>
Hope maybe it helps someone in future!
I am writing this code, but I can´t see the buttons, only the images. I am usiang xamaring forms in visual studio for a mobile app.I need to see both elements, the buttons in the first row and de images in the second row
<ContentPage.Content>
<ScrollView
Padding="{ StaticResource MainWrapperPadding }">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" Text="1" BackgroundColor="#FFE53C25"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Grid.Column="1" Grid.Row="0" Text="2" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Grid.Column="2" Grid.Row="0" Text="3" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Grid.Column="3" Grid.Row="0" Text="4" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<artina:GridOptionsView
x:Name="promotionsList"
Margin="0"
ColumnSpacing="0"
RowSpacing="0"
Padding="2"
ColumnCount="{
artina:OnOrientationInt
PortraitPhone=2,
LandscapePhone=3,
PortraitTablet=3,
LandscapeTablet=4,
PortraitDesktop=4,
LandscapeDesktop=4
}"
VerticalOptions="FillAndExpand">
<artina:GridOptionsView.ItemTemplate>
<DataTemplate>
<local:PromotionItemTemplate HeightRequest="296" />
</DataTemplate>
</artina:GridOptionsView.ItemTemplate>
</artina:GridOptionsView>
</StackLayout>
</Grid>-->
</ScrollView>
</ContentPage.Content>
</ContentPage>
Here i am going to make more easy of your task adding more fields
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
<Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="1" />
<RowDefinition Height="2" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="0" BackgroundColor="Blue" >
<Button Text="1" BackgroundColor="#FFE53C25"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Text="2" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Text="3" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Text="4" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Red" >
<artina:GridOptionsView
x:Name="promotionsList"
Margin="0"
ColumnSpacing="0"
RowSpacing="0"
Padding="2"
ColumnCount="{
artina:OnOrientationInt
PortraitPhone=2,
LandscapePhone=3,
PortraitTablet=3,
LandscapeTablet=4,
PortraitDesktop=4,
LandscapeDesktop=4
}"
VerticalOptions="FillAndExpand">
<artina:GridOptionsView.ItemTemplate>
<DataTemplate>
<local:PromotionItemTemplate HeightRequest="296" />
</DataTemplate>
</artina:GridOptionsView.ItemTemplate>
</artina:GridOptionsView>
</StackLayout>
</Grid>
</StackLayout>
stack layout with grid rows
here Im getting list of data to which Im assigning it to a listview... In that i need to display user ratings to every Item.. So when the user rating is $.. I need to display 4stars in greeen color and another 1 star in gray color.. Im unable to do this.. Can anyone please tell me
<ListView ItemSource="{Binding Data}">
<ListView.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="White" Padding="5" >
<Grid Padding="3" BackgroundColor="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage HeightRequest="100" Aspect="AspectFill"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding Images}" Grid.Row="0" Grid.Column="0"/>
<!--<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<Label x:Name="Label"
Text="{Binding FileName}" />
<Label Text="uhfuiehuegirtj"/>
<Label Text="ufoidjgoidrjiojkgorij"/>
</StackLayout>-->
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding CourseName}" FontAttributes="Bold" TextColor="Black" Grid.Row="0" Grid.Column="0" LineBreakMode="WordWrap"/>
<Label Text="{Binding CourseDescription}" TextColor="Black" Grid.Row="1" Grid.Column="0" LineBreakMode="WordWrap"/>
<StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal">
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img1"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img2"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img3"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img4"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img5"/>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal">
<Label Text="{Binding CoursePrice}" TextColor="Black" HorizontalTextAlignment="Start" FontAttributes="Bold" VerticalTextAlignment="Center"/>
<Button Image="wishlist.png" HorizontalOptions="Fill" BackgroundColor="Transparent" Clicked="btn_clicked"/>
</StackLayout>
</Grid>
</Grid>
</Frame>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
There are plenty of samples and controls out there. You don't really need to do it yourself. Syncfusion offers some nice controls for Xamarin. There is a free Community License too.
I think that's what you want -> https://www.syncfusion.com/products/xamarin