what Xaml for image

[Hà]

I want to create xml like this,

thanks all !

[Lance | Manager Technical Support]

Hello Hà Tài,

You can create that layout using the ListView's layout options, to get 5 columns you set the SpanCount of the GridLayoutDefinition to 5. For example:

<telerikDataControls:RadListView>
   <telerikDataControls:RadListView.LayoutDefinition>
       <telerikListView:GridLayoutDefinition SpanCount="5"/>
   </telerikDataControls:RadListView.LayoutDefinition>
</telerikDataControls:RadListView>

If you're referring to how to get the styling of the items, you can set that in the ItemTemplate, see here for more on Item styling. Here's an example of setting an ItemTemplate

<telerikDataControls:RadListView.ItemTemplate>
    <DataTemplate>
         <TextBlock Text="{Binding MyProperty}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>

Please let us know if you have any further questions.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[Hà]

Thanks Lance,

How to have style as photo ?
I have tried every which way not to be like this,thanks bro

[Lance | Manager Technical Support]

Hi,

You can use the regular XAML Image control and bind it's Source property to the path of the photo.  I've written an example application (attached) that shows how to accomplish this. Open the solution in Visual Studio 2015 and go to Shared > ImagesPage.xaml.

Note: you have selected Windows Universal for this thread, so my demo app is using the UI for Windows Universal (Windows 8.1) controls. If you intended to submit this for UI for Universal Windows Platform (UWP) controls, the DataTemplate is exactly the same.

Since I don't know what your model looks like, I created an example one to use for the ListView:

public class PhotoModel
{
    public string Title { get; set; }
    public string ImageUri { get; set; }
}

I created a list of PhotoModel and set that as the ListView's ItemsSource. With the PhotoModel as the DataContext for the ItemTemplate, we can now do this:

<telerikDataControls:RadListView.ItemTemplate>
      <DataTemplate>
          <Grid MaxHeight="175">
              <Image Source="{Binding ImageUri}"
                            Stretch="UniformToFill" />
              <Border VerticalAlignment="Bottom"
                            Background="#99000000">
                 <TextBlock Text="{Binding Title}"
                            Foreground="White"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center" />
              </Border>
          </Grid>
   </DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>

Here is the result:






Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress