I'm using the FlexLayout with images. My last row contains an odd number of images. How can I left justify the last row images? Currently they appear centered.
<FlexLayout x:Name="ThumbnailLayout"
AlignItems="Start"
JustifyContent="SpaceEvenly"
Wrap="Wrap">
</FlexLayout>
See attachment..
thx]1
It seems like you should be able to do that, however I ran into the same issue. I solved my situation by setting the FlexLayout.Basis attribute on the ImageButton inside of the FlexLayout, setting JustifyContent="Start" and giving it a HeightRequest.
<FlexLayout x:Name="photos" JustifyContent="Start" Wrap="Wrap">
<BindableLayout.ItemTemplate>
<DataTemplate>
<ImageButton
FlexLayout.Basis="33.33%"
x:Name="imageCell"
Aspect="AspectFill"
Clicked="ImageClicked"
Source="{Binding ThumbnailSource}"
>
<ImageButton.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Phone="110" Tablet="180"/>
</ImageButton.HeightRequest>
</ImageButton>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
Related
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 am using observable collection and displaying my images in carousel view. I need to adjust them by size..for example the first the biggest and then the images should go smaller. Is there a way to achieve this?
<IndicatorView x:Name="indicatorView" IndicatorSize="14"
MaximumVisible="6" IndicatorsShape="Circle"
Margin="0,20,0,30"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="Center">
</IndicatorView>
<!--Pictures-->
<CarouselView Margin="0,0,0,20" HorizontalScrollBarVisibility="Never" x:Name="image"
ItemsSource="{Binding ImageResults, Mode=TwoWay}"
BackgroundColor="{DynamicResource PictureBackground}"
IndicatorView="indicatorView" >
<CarouselView.ItemTemplate >
<DataTemplate>
<Image Source="{Binding FieldVisualData}" WidthRequest="530" HeightRequest="334" />
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
I find that Image uses the WidthRequest and HeightRequest.
There is a easy way to make the size of the images in CarouselView consistent, you could set AspectFit for each Image to show the same effects.
For example:
<Image Source="{Binding FieldVisualData}"
WidthRequest="530"
HeightRequest="334"
Aspect="AspectFit"/>
I have an image slider and I want to position a search box on top of the image slider.
Here is my code:
<StackLayout HeightRequest="200" >
<cv:CarouselView Margin="0" ItemsSource="{Binding Zoos}" x:Name="CarouselZoos">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Image Grid.RowSpan="1" Grid.Row="0" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
</StackLayout>
<StackLayout>
<SearchBar FontAttributes="Bold"
FontFamily="Raleway.ttf#Raleway"
FontSize="11"
Placeholder="SEARCH FOR MEDICINE AND PRODUCTS"
HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
Focused="SearchBar_Focused"/>
</StackLayout>
The easiest way to do this is to wrap your element into a grid and placing the second one into the same grid.
The grid layout will put all elements inside the same cell over each other with the last one being added laying topmost.
<Grid>
<Image ... />
<Label VerticalOptions="Center" HorizontalOptions="Center" />
</Grid>
This example would put the label in the mid over the image.
When using interactive elements, keep in mind that they have to be the last ones added in order to be clickable.
So for instance, if you had
<Grid>
<Button ... />
<Image ... />
</Grid>
the button would end up being overlayed by the image and therefore not be clickable.
I want to create a notification icon and showing all unread message as count, How to achieve this. This tool is best for this.
I'm sharing the one I build.
It's picture with a badge on top of it with Xamaring controls only.
Just fine tune the Height and Width of the "badge" on the Frame and the content on the Label.
Position the X-Axis of the badge with the ConstraintExpression: "Constant=14"
<RelativeLayout>
<Image Source="picture.png" WidthRequest="28" HeightRequest="28" />
<Frame BackgroundColor="#FF0000" OutlineColor="White"
RelativeLayout.HeightConstraint="22"
RelativeLayout.WidthConstraint="22"
CornerRadius="11"
HorizontalOptions="Center"
Padding="0"
IsClippedToBounds="True"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=14}"
RelativeLayout.YConstraint="-6">
<StackLayout WidthRequest="22">
<Label Padding="2" Text="+5" RelativeLayout.WidthConstraint="22" TextColor="White" FontSize="12" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</Frame>
</RelativeLayout>
Picture of the above code on my app (the "+5" badge):
First, you need to have a BadgeView, to represent the notification counter.
In order to achieve this, you can use the BadgeView NuGet Package
After adding to your solution, you can add in XAML a badge indicator:
<badge:BadgeView Text="{Binding BadgeNumber}" BadgeColor="{Binding BadgeColor}" VerticalOptions="Center" HorizontalOptions="End" />
The next step, is putting all together, so you need to have a Image (your bell), and pack the image with the Badge View. Since you want to overlay both elements, you can use a Grid.
<Grid>
<Image Source="bell.png" HorizontalOptions="Center" VerticalOptions="Center"
<badge:BadgeView Text="{Binding BadgeNumber}" BadgeColor="{Binding BadgeColor}" VerticalOptions="End" HorizontalOptions="Start" />
</Grid>
Here you are setting the image, to be in the center, and the badge to be in the Top Left Corner. After this, you should manipulate the Badge Position with Margins, in order to put the badge in the correct position that you want.
I'm trying to embed an editor in a Xamarin.Forms.DataGrid cell using following code (inspired from this sample)
<ContentPage.Content>
<StackLayout>
<dg:DataGrid ItemsSource="{Binding Items}" SelectionEnabled="True" SelectedItem="{Binding SelectedItem}"
RowHeight="70" HeaderHeight="50" PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}">
<dg:DataGrid.Columns>
<dg:DataGridColumn Title="Col. 1" PropertyName="Prop. 1" Width="0.7*">
<dg:DataGridColumn.CellTemplate>
<DataTemplate>
<Entry Text="{Binding}" />
</DataTemplate>
</dg:DataGridColumn.CellTemplate>
</dg:DataGridColumn>
</dg:DataGrid.Columns>
</dg:DataGrid>
</StackLayout>
</ContentPage.Content>
Now that works ok, but the edited text is aligned top-left of the cell. So I go trying to use one of the following alignment parameters:
HorizontalOptions="Center" VerticalOptions="Center"
<!-- or >
HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
But in both cases, I end up with text centered within the cell, but now, the editor doesn't expand (it seems as if I had padding)... And the result with either Centeror CenterAndExpand is actually the same:
Could anyone help me get the desired result ?
EDIT: updated with full grid's definition
BONUS question: how to get rid of the editor's border?
You can try this:
<Entry Text="{Binding}" HorizontalTextAlignment="Center" />
Bonus answer: To get rid of border you need custom renderers.