Category / Section
How to use SfHubTile as a part of a DataTemplate in any control?
1 min read
How to use SfHubTile as a part of a DataTemplate in any control?
SfHubtile can be used as a part of a DataTemplate to display the collections of data in a customized format. In the below example, SfHubTile is set as a DataTemplate in the GridView control
Refer to the following code example
MainWindow.xaml
<Page.DataContext> <local:ViewProperties/> </Page.DataContext> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <GridView ItemsSource="{Binding Images}"> <GridView.ItemTemplate> <DataTemplate> <Grid> <Notification:SfHubTile Width="250" Height="160" Foreground="White" ScaleDepth="0.9" RotationDepth="10" Padding="2" Interval="{Binding Interval}" Background="{Binding TileColor}"> <Notification:SfHubTile.HubTileTransitions> <Notification:HubTileTransitionCollection> <trans:RotateTransition/> </Notification:HubTileTransitionCollection> </Notification:SfHubTile.HubTileTransitions> <Notification:SfHubTile.Content> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image Source="{Binding Image}" Stretch="Uniform" Width="250"/> <Grid Background="{Binding HeaderColor}" Grid.Row="1"> <TextBlock Text="{Binding Name}" FontSize="14" Margin="8" HorizontalAlignment="Stretch"/> </Grid> </Grid> </Notification:SfHubTile.Content> <Notification:SfHubTile.SecondaryContent> <Grid Background="{Binding HeaderColor}"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Image Source="TileImages/Contact.png"/> <TextBlock Text="{Binding Phone}" Grid.Row="1" FontSize="14" Margin="8" HorizontalAlignment="Stretch"/> <Image Source="TileImages/Mail.png" Grid.Row="2"/> <TextBlock Text="{Binding Email}" Grid.Row="3" FontSize="14" Margin="8" HorizontalAlignment="Stretch"/> </Grid> </Notification:SfHubTile.SecondaryContent> </Notification:SfHubTile> </Grid> </DataTemplate> </GridView.ItemTemplate> </GridView> </Grid>
ViewProperties.cs
public class ViewProperties : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; public void RaisePropertyChanged(string name) { if(PropertyChanged!=null) PropertyChanged(this, new PropertyChangedEventArgs(name)); } private Random rndm; private double GetInterval() { return rndm.Next(2, 15); } public ViewProperties() { rndm = new Random(); Images = new ObservableCollection<Person>(); Images.Add(new Person("Eric Joplin", "TileImages/Emp_02.png", GetInterval(), "Chairman", "Management", "27/09/1973", "Boston", "+800 9899 9929", "ericjoplin@syncfusion.com", "#FFA400","#E78E00")); Images.Add(new Person("Paul Vent", "TileImages/Emp_04.png", GetInterval(), "Chief Executive Officer", "Management", "27/09/1975", "New York", "+800 9899 9930", "paulvent@syncfusion.com", "#6DA4A3", "#4E7F7D")); Images.Add(new Person("Clara Venus", "TileImages/Emp_06.png", GetInterval(), "Chief Executive Assistant", "Management", "27/09/1978", "California", "+800 9899 9931", "claravenus@syncfusion.com", "#A45378", "#883F64")); } private ObservableCollection<Person> images; public ObservableCollection<Person> Images { get { return images; } set { images = value; } } } public class Person { public string Name { get; set; } public string Image { get; set; } public TimeSpan Interval { get; set; } public string Position { get; set; } public string OrganizationUnit { get; set; } public string DateOfBirth { get; set; } public string Location { get; set; } public string Phone { get; set; } public string Email { get; set; } public string TileColor { get; set; } public string HeaderColor { get; set; } public Person(string name, string image, double seconds,string position,string organizationunit,string dateofbirth,string location,string phone,string email,string color,string headercolor) { Name = name; Image = image; Interval = TimeSpan.FromSeconds(seconds); Position = position; OrganizationUnit = organizationunit; DateOfBirth = dateofbirth; Location = location; Phone = phone; Email = email; TileColor = color; HeaderColor = headercolor; } }
Output: