Articles in this section
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:

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied