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.
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 have this:
<StackLayout VerticalOptions="FillAndExpand">
<LineEntry />
<ScrollView VerticalOptions="FillAndExpand">
<StackLayout x:Name="stack" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
</StackLayout>
</ScrollView>
</StackLayout>
But it does not scroll, except if you are into the LineEntry, because the keyboard is up. I think it's because the content page has less height than the scrollView, but don't know how to fix this.
I will update some mockups(can't use the real images) for more information, in the first one, does not works, in the second one, it works:
the content page has less height than the scrollView
This should be the first reason , and the send reason is the Content should exists some things , not a empty layot in ScrollView :
The follow code can work , just for reference :
<StackLayout VerticalOptions="FillAndExpand">
<Entry Text="First Entry"/>
<ScrollView HeightRequest="100" BackgroundColor="Beige" VerticalScrollBarVisibility="Always">
<StackLayout x:Name="stack"
HorizontalOptions="FillAndExpand"
HeightRequest="200">
<Entry Placeholder="Second Entry"/>
</StackLayout>
</ScrollView>
</StackLayout>
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.
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'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.