How to use SfHubTile as a part of a DataTemplate in any control?
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", "[email protected]", "#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", "[email protected]", "#6DA4A3", "#4E7F7D"));
Images.Add(new Person("Clara Venus", "TileImages/Emp_06.png", GetInterval(), "Chief Executive Assistant", "Management", "27/09/1978", "California", "+800 9899 9931", "[email protected]", "#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:
