CODEWITHSUNDEEP
c#windowsxamlwindows-10uwp
Code
Code

Reputation: 2129

Building Tile in XAML

I am trying to add a tile in via XAML. I eventually want to add text to the tiles, such as news articles (so a news article for each tile in my mainpage.xaml). Can anyone point me to an example or show me a code snippet as to how this can be accomplished? I will post a screenshot of what I am trying to accomplish....

enter image description here

This is a code snippet I found online, but looks like it is for Windows 8 development?

<controls:Tile Title="Hello!" 
   TiltFactor="2"
   Width="100" Height="100" 
   Count="1">
</controls:Tile>

NOTE: This is a Universal Windows Application

Upvotes: 0

Views: 1876

Answers (1)

Tom Wuyts
Tom Wuyts

Reputation: 854

Take a look at the GridView in xaml (exists both in W8 and UWP) https://msdn.microsoft.com/nl-nl/library/windows/apps/windows.ui.xaml.controls.gridview.aspx

You can define an ItemContainterStyle such that it will look like your tiles.

An example, with some hardcoded items:

<GridView Width="800" Height="300">
  <GridView.ItemsPanel>
    <ItemsPanelTemplate>
      <ItemsWrapGrid Orientation="Vertical" />
    </ItemsPanelTemplate>
  </GridView.ItemsPanel>
  <GridView.ItemContainerStyle>
    <Style TargetType="GridViewItem">
      <Style.Setters>
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate>
              <Grid Background="Gray" Margin="5" Height="100" Width="100">
                <ContentPresenter />
              </Grid>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style.Setters> 
    </Style>
  </GridView.ItemContainerStyle>

  <GridViewItem>
    Item1
  </GridViewItem>
  <GridViewItem>
    Item2
  </GridViewItem>
  <GridViewItem>
    Item3
  </GridViewItem>
  <GridViewItem>
    Item4
  </GridViewItem>
  <GridViewItem>
    Item5
  </GridViewItem>
  <GridViewItem>
    Item6
  </GridViewItem>
  <GridViewItem>
    Item7
  </GridViewItem>
  <GridViewItem>
    Item8
  </GridViewItem>
</GridView>

This will look like:

enter image description here

If you want to bind your ItemsSource to your VM, you can do so as such. Assuming the property public ObservableCollection<string> Items {get;set;} exists in your VM.

Replace <GridView Width="800" Height="300"> with <GridView Width="800" Height="300" ItemsSource="{Binding Items}">

Upvotes: 3

Related Questions