Search code examples
c#wpfxamlcontrolsfile-manager

Scalable set of controls to display file tiles


What certain set of xaml controls enables UI to display file tiles in a wpf window?

There are 3 rows on a grid, I need to display any folder's data on the second row and the first column.

<Grid x:Name="explorerGrid" MouseLeftButtonDown="explorerGrid_MouseRightButtonDown">
    <Grid.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF08C0F0" Offset="0"/> <GradientStop Color="White" Offset="1"/>
        </LinearGradientBrush>
    </Grid.Background>
    <Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="320"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="24"></RowDefinition><RowDefinition Height="*"></RowDefinition> <RowDefinition Height="35"></RowDefinition>
    </Grid.RowDefinitions> <!--other controls-->
</Grid>

Solution

  • I've found the solution - it is the ItemsControl with an ItemsControl.ItemsPanel

    public class FileIconInfo
    {
        public Icon Icon { get; set; }
        public FileInfo FileInfo { get; set; }
        public ImageSource IconSource { get; set; }
    }
    
    <ItemsControl Background="#34808F80" x:Name="icFiles" Grid.Row="1" Grid.Column="0" ItemsSource="{Binding FileIconInfos}"> 
        <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <WrapPanel> </WrapPanel> </ItemsPanelTemplate> </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="White" BorderThickness="1" Margin="10" Padding="10">
                    <StackPanel Background="#44808F80" Orientation="Vertical">
                        <Image Height="32" Width="32" Source="{Binding IconSource}" />
                        <TextBlock Foreground="White" FontSize="12" Text="{Binding FileInfo.FullName}"/>
                        <TextBlock Foreground="White" FontSize="12" Text="{Binding FileInfo.DirectoryName}"/>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>