Visual Style in Xamarin Avatar View(SfAvatarView)
12 Aug 202224 minutes to read
Visual styles in Xamarin Avatar View(SfAvatarView)
The SfAvatarView control supports customization using the following built-in visual styles:
Custom
Custom type allows you to customize the control, where you can handle the size, colors, images, etc. of the control. Refer to this documentation.
NOTE
The default visual type is
Custom.
Circle
You can directly set value to the circle in the SfAvatarView using the following styles:
- ExtraLargeCircle
- LargeCircle
- MediumCircle
- SmallCircle
- ExtraSmallCircle
The following code sample demonstrates how to define visual style of circle AvatarView.
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="AvatarViewStyle" TargetType="sfavatar:SfAvatarView">
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="ContentType" Value="Custom"/>
<Setter Property="ImageSource" Value="ellanaa.png"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<sfavatar:SfAvatarView AvatarShape="Circle" AvatarSize="ExtraLarge" Grid.Row="0" Grid.Column="4" Style="{StaticResource AvatarViewStyle}"/>
<Label Text="ExtraLargeCircle" FontAttributes="Bold" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="4" FontSize="10"/>
<sfavatar:SfAvatarView AvatarShape="Circle" AvatarSize="Large" Grid.Row="0" Grid.Column="3" Style="{StaticResource AvatarViewStyle}"/>
<Label Text="LargeCircle" FontAttributes="Bold" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="3" FontSize="10"/>
<sfavatar:SfAvatarView AvatarShape="Circle" AvatarSize="Medium" Grid.Row="0" Grid.Column="2" Style="{StaticResource AvatarViewStyle}"/>
<Label Text="MediumCircle" FontAttributes="Bold" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="2" FontSize="10"/>
<sfavatar:SfAvatarView AvatarShape="Circle" AvatarSize="Small" Grid.Row="0" Grid.Column="1" Style="{StaticResource AvatarViewStyle}"/>
<Label Text="SmallCircle" FontAttributes="Bold" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="1" FontSize="10"/>
<sfavatar:SfAvatarView AvatarShape="Circle" AvatarSize="ExtraSmall" Grid.Row="0" Grid.Column="0" Style="{StaticResource AvatarViewStyle}"/>
<Label Text="ExtraSmallCircle" FontAttributes="Bold" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="0" FontSize="10"/>
</Grid>
</StackLayout>
</ContentPage.Content>StackLayout stack = new StackLayout();
stack.Orientation = StackOrientation.Vertical;
stack.HorizontalOptions = LayoutOptions.CenterAndExpand;
stack.VerticalOptions = LayoutOptions.CenterAndExpand;
Grid mainGrid = new Grid();
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
mainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
mainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
mainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
mainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
mainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
Label XLargeCirclelabel = new Label();
XLargeCirclelabel.Text = "ExtraLargeCircle";
XLargeCirclelabel.FontSize = 12;
XLargeCirclelabel.FontAttributes = FontAttributes.Bold;
XLargeCirclelabel.HorizontalOptions = LayoutOptions.Center;
XLargeCirclelabel.VerticalOptions = LayoutOptions.Center;
XLargeCirclelabel.HorizontalTextAlignment = TextAlignment.Center;
XLargeCirclelabel.VerticalTextAlignment = TextAlignment.Center;
XLargeCirclelabel.FontSize = 10;
SfAvatarView avatarview1 = new SfAvatarView();
avatarview1.VerticalOptions = LayoutOptions.Center;
avatarview1.HorizontalOptions = LayoutOptions.Center;
avatarview1.AvatarShape = AvatarShape.Circle;
avatarview1.AvatarSize = AvatarSize.ExtraLarge;
avatarview1.ContentType = ContentType.Default;
avatarview1.ImageSource = "ellanaa.png";
Label LargeCirclelabel = new Label();
LargeCirclelabel.Text = "LargeCircle";
LargeCirclelabel.FontSize = 12;
LargeCirclelabel.FontAttributes = FontAttributes.Bold;
LargeCirclelabel.HorizontalOptions = LayoutOptions.Center;
LargeCirclelabel.VerticalOptions = LayoutOptions.Center;
LargeCirclelabel.HorizontalTextAlignment = TextAlignment.Center;
LargeCirclelabel.VerticalTextAlignment = TextAlignment.Center;
LargeCirclelabel.FontSize = 10;
SfAvatarView avatarview2 = new SfAvatarView();
avatarview2.VerticalOptions = LayoutOptions.Center;
avatarview2.HorizontalOptions = LayoutOptions.Center;
avatarview2.AvatarShape = AvatarShape.Circle;
avatarview2.AvatarSize = AvatarSize.Large;
avatarview2.ContentType = ContentType.Default;
avatarview2.ImageSource = "ellanaa.png";
Label MediumCirclelabel = new Label();
MediumCirclelabel.Text = "MediumCircle";
MediumCirclelabel.FontSize = 12;
MediumCirclelabel.FontAttributes = FontAttributes.Bold;
MediumCirclelabel.HorizontalOptions = LayoutOptions.Center;
MediumCirclelabel.VerticalOptions = LayoutOptions.Center;
MediumCirclelabel.HorizontalTextAlignment = TextAlignment.Center;
MediumCirclelabel.VerticalTextAlignment = TextAlignment.Center;
MediumCirclelabel.FontSize = 10;
SfAvatarView avatarview3 = new SfAvatarView();
avatarview3.VerticalOptions = LayoutOptions.Center;
avatarview3.HorizontalOptions = LayoutOptions.Center;
avatarview3.AvatarShape = AvatarShape.Circle;
avatarview3.AvatarSize = AvatarSize.Medium;
avatarview3.ContentType = ContentType.Default;
avatarview3.ImageSource = "ellanaa.png";
Label SmallCirclelabel = new Label();
SmallCirclelabel.Text = "SmallCircle";
SmallCirclelabel.FontSize = 12;
SmallCirclelabel.FontAttributes = FontAttributes.Bold;
SmallCirclelabel.HorizontalOptions = LayoutOptions.Center;
SmallCirclelabel.VerticalOptions = LayoutOptions.Center;
SmallCirclelabel.HorizontalTextAlignment = TextAlignment.Center;
SmallCirclelabel.VerticalTextAlignment = TextAlignment.Center;
SmallCirclelabel.FontSize = 10;
SfAvatarView avatarview4 = new SfAvatarView();
avatarview4.VerticalOptions = LayoutOptions.Center;
avatarview4.HorizontalOptions = LayoutOptions.Center;
avatarview4.AvatarShape = AvatarShape.Circle;
avatarview4.AvatarSize = AvatarSize.Small;
avatarview4.ContentType = ContentType.Default;
avatarview4.ImageSource = "ellanaa.png";
Label XSmallCirclelabel = new Label();
XSmallCirclelabel.Text = "ExtraSmallCircle";
XSmallCirclelabel.FontSize = 12;
XSmallCirclelabel.FontAttributes = FontAttributes.Bold;
XSmallCirclelabel.HorizontalOptions = LayoutOptions.Center;
XSmallCirclelabel.VerticalOptions = LayoutOptions.Center;
XSmallCirclelabel.HorizontalTextAlignment = TextAlignment.Center;
XSmallCirclelabel.VerticalTextAlignment = TextAlignment.Center;
XSmallCirclelabel.FontSize = 10;
SfAvatarView avatarview5 = new SfAvatarView();
avatarview5.VerticalOptions = LayoutOptions.Center;
avatarview5.HorizontalOptions = LayoutOptions.Center;
avatarview5.AvatarShape = AvatarShape.Circle;
avatarview5.ImageSource = "ellanaa.png";
avatarview5.AvatarSize = AvatarSize.ExtraSmall;
avatarview5.ContentType = ContentType.Default;
mainGrid.Children.Add(XLargeCirclelabel,4,1);
mainGrid.Children.Add(avatarview1,4,0);
mainGrid.Children.Add(LargeCirclelabel, 3, 1);
mainGrid.Children.Add(avatarview2, 3, 0);
mainGrid.Children.Add(MediumCirclelabel, 2, 1);
mainGrid.Children.Add(avatarview3, 2, 0);
mainGrid.Children.Add(SmallCirclelabel, 1, 1);
mainGrid.Children.Add(avatarview4, 1, 0);
mainGrid.Children.Add(XSmallCirclelabel, 0, 1);
mainGrid.Children.Add(avatarview5, 0, 0);
stack.Children.Add(mainGrid);
this.Content = stack;
Square
You can directly set value to the square in the SfAvatarView using the following styles:
- ExtraLargeSquare
- LargeSquare
- MediumSquare
- SmallSquare
- ExtraSmallSquare
The following code sample demonstrates how to define visual style of square AvatarView.
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="AvatarViewStyle" TargetType="sfavatar:SfAvatarView">
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="ContentType" Value="Custom"/>
<Setter Property="ImageSource" Value="ellanaa.png"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<sfavatar:SfAvatarView AvatarShape="Square" AvatarSize="ExtraLarge" Grid.Row="0" Grid.Column="4" Style="{StaticResource AvatarViewStyle}"/>
<Label Text="ExtraLargeSquare" FontAttributes="Bold" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="4" FontSize="10"/>
<sfavatar:SfAvatarView AvatarShape="Square" AvatarSize="Large" Grid.Row="0" Grid.Column="3" Style="{StaticResource AvatarViewStyle}"/>
<Label Text="LargeSquare" FontAttributes="Bold" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="3" FontSize="10"/>
<sfavatar:SfAvatarView AvatarShape="Square" AvatarSize="Medium" Grid.Row="0" Grid.Column="2" Style="{StaticResource AvatarViewStyle}"/>
<Label Text="MediumSquare" FontAttributes="Bold" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="2" FontSize="10"/>
<sfavatar:SfAvatarView AvatarShape="Square" AvatarSize="Small" Grid.Row="0" Grid.Column="1" Style="{StaticResource AvatarViewStyle}"/>
<Label Text="SmallSquare" FontAttributes="Bold" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="1" FontSize="10"/>
<sfavatar:SfAvatarView AvatarShape="Square" AvatarSize="ExtraSmall" Grid.Row="0" Grid.Column="0" Style="{StaticResource AvatarViewStyle}"/>
<Label Text="ExtraSmallSquare" FontAttributes="Bold" Grid.Row="1" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Column="0" FontSize="10"/>
</Grid>
</StackLayout>
</ContentPage.Content>StackLayout stack = new StackLayout();
stack.Orientation = StackOrientation.Vertical;
stack.HorizontalOptions = LayoutOptions.CenterAndExpand;
stack.VerticalOptions = LayoutOptions.CenterAndExpand;
Grid mainGrid = new Grid();
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
mainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
mainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
mainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
mainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
mainGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
Label XLargeSquarelabel = new Label();
XLargeSquarelabel.Text = "ExtraLargeSquare";
XLargeSquarelabel.FontSize = 12;
XLargeSquarelabel.FontAttributes = FontAttributes.Bold;
XLargeSquarelabel.HorizontalOptions = LayoutOptions.Center;
XLargeSquarelabel.VerticalOptions = LayoutOptions.Center;
XLargeSquarelabel.HorizontalTextAlignment = TextAlignment.Center;
XLargeSquarelabel.VerticalTextAlignment = TextAlignment.Center;
XLargeSquarelabel.FontSize = 10;
SfAvatarView avatarviewsquare1 = new SfAvatarView();
avatarviewsquare1.VerticalOptions = LayoutOptions.Center;
avatarviewsquare1.HorizontalOptions = LayoutOptions.Center;
avatarviewsquare1.AvatarShape = AvatarShape.Square;
avatarviewsquare1.AvatarSize = AvatarSize.ExtraLarge;
avatarviewsquare1.ContentType = ContentType.Default;
avatarviewsquare1.ImageSource = "ellanaa.png";
Label LargeSquarelabel = new Label();
LargeSquarelabel.Text = "LargeSquare";
LargeSquarelabel.FontSize = 12;
LargeSquarelabel.FontAttributes = FontAttributes.Bold;
LargeSquarelabel.HorizontalOptions = LayoutOptions.Center;
LargeSquarelabel.VerticalOptions = LayoutOptions.Center;
LargeSquarelabel.HorizontalTextAlignment = TextAlignment.Center;
LargeSquarelabel.VerticalTextAlignment = TextAlignment.Center;
LargeSquarelabel.FontSize = 10;
SfAvatarView avatarviewsquare2 = new SfAvatarView();
avatarviewsquare2.VerticalOptions = LayoutOptions.Center;
avatarviewsquare2.HorizontalOptions = LayoutOptions.Center;
avatarviewsquare2.AvatarShape = AvatarShape.Square;
avatarviewsquare2.AvatarSize = AvatarSize.Large;
avatarviewsquare2.ContentType = ContentType.Default;
avatarviewsquare2.ImageSource = "ellanaa.png";
Label MediumSquarelabel = new Label();
MediumSquarelabel.Text = "MediumSquare";
MediumSquarelabel.FontSize = 12;
MediumSquarelabel.FontAttributes = FontAttributes.Bold;
MediumSquarelabel.HorizontalOptions = LayoutOptions.Center;
MediumSquarelabel.VerticalOptions = LayoutOptions.Center;
MediumSquarelabel.HorizontalTextAlignment = TextAlignment.Center;
MediumSquarelabel.VerticalTextAlignment = TextAlignment.Center;
MediumSquarelabel.FontSize = 10;
SfAvatarView avatarviewsquare3 = new SfAvatarView();
avatarviewsquare3.VerticalOptions = LayoutOptions.Center;
avatarviewsquare3.HorizontalOptions = LayoutOptions.Center;
avatarviewsquare3.AvatarShape = AvatarShape.Square;
avatarviewsquare3.AvatarSize = AvatarSize.Medium;
avatarviewsquare3.ContentType = ContentType.Default;
avatarviewsquare3.ImageSource = "ellanaa.png";
Label SmallSquarelabel = new Label();
SmallSquarelabel.Text = "SmallSquare";
SmallSquarelabel.FontSize = 12;
SmallSquarelabel.FontAttributes = FontAttributes.Bold;
SmallSquarelabel.HorizontalOptions = LayoutOptions.Center;
SmallSquarelabel.VerticalOptions = LayoutOptions.Center;
SmallSquarelabel.HorizontalTextAlignment = TextAlignment.Center;
SmallSquarelabel.VerticalTextAlignment = TextAlignment.Center;
SmallSquarelabel.FontSize = 10;
SfAvatarView avatarviewsquare4 = new SfAvatarView();
avatarviewsquare4.VerticalOptions = LayoutOptions.Center;
avatarviewsquare4.HorizontalOptions = LayoutOptions.Center;
avatarviewsquare4.AvatarShape = AvatarShape.Square;
avatarviewsquare4.AvatarSize = AvatarSize.Small;
avatarviewsquare4.ContentType = ContentType.Default;
avatarviewsquare4.ImageSource = "ellanaa.png";
Label XSmallSquarelabel = new Label();
XSmallSquarelabel.Text = "ExtraSmallSquare";
XSmallSquarelabel.FontSize = 12;
XSmallSquarelabel.FontAttributes = FontAttributes.Bold;
XSmallSquarelabel.HorizontalOptions = LayoutOptions.Center;
XSmallSquarelabel.VerticalOptions = LayoutOptions.Center;
XSmallSquarelabel.HorizontalTextAlignment = TextAlignment.Center;
XSmallSquarelabel.VerticalTextAlignment = TextAlignment.Center;
XSmallSquarelabel.FontSize = 10;
SfAvatarView avatarviewsquare5 = new SfAvatarView();
avatarviewsquare5.VerticalOptions = LayoutOptions.Center;
avatarviewsquare5.HorizontalOptions = LayoutOptions.Center;
avatarviewsquare5.AvatarShape = AvatarShape.Square;
avatarviewsquare5.AvatarSize = AvatarSize.ExtraSmall;
avatarviewsquare5.ContentType = ContentType.Default;
avatarviewsquare5.ImageSource = "ellanaa.png";
mainGrid.Children.Add(XLargeSquarelabel, 4, 1);
mainGrid.Children.Add(avatarviewsquare1, 4, 0);
mainGrid.Children.Add(LargeSquarelabel, 3, 1);
mainGrid.Children.Add(avatarviewsquare2, 3, 0);
mainGrid.Children.Add(MediumSquarelabel, 2, 1);
mainGrid.Children.Add(avatarviewsquare3, 2, 0);
mainGrid.Children.Add(SmallSquarelabel, 1, 1);
mainGrid.Children.Add(avatarviewsquare4, 1, 0);
mainGrid.Children.Add(XSmallSquarelabel, 0, 1);
mainGrid.Children.Add(avatarviewsquare5, 0, 0);
stack.Children.Add(mainGrid);
this.Content = stack;
The visual style sample is available in the following link: Sample.