【WPF】自定義數據集合綁定到UI界面

需要展示列表項，從https://github.com/jdscodelab/File-Manager-UI-Wpf這個項目，只有前端UI。複用了其文件內容列表

主要源碼：

<StackPanel Orientation="Vertical">
                        <Button Style="{DynamicResource ButtonStyle1}">
                            <Button.Content>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="100"/>
                                        <ColumnDefinition Width="140"/>
                                        <ColumnDefinition Width="120"/>
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/folder.png" HorizontalAlignment="Left"/>
                                        <TextBlock Margin="5,0,0,0" Text="Collection 1" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
                                    </StackPanel>
                                    <TextBlock Grid.Column="1" Text="21 Items" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="2" Text="Jan 3, 2019" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="3" Text="15 Gb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                </Grid>
                            </Button.Content>
                        </Button>                       
                        <Button Style="{DynamicResource ButtonStyle1}">
                            <Button.Content>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="100"/>
                                        <ColumnDefinition Width="140"/>
                                        <ColumnDefinition Width="120"/>
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/folder.png" HorizontalAlignment="Left"/>
                                        <TextBlock Margin="5,0,0,0" Text="Collection 2" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
                                    </StackPanel>
                                    <TextBlock Grid.Column="1" Text="40 Items" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="2" Text="Jan 10, 2020" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="3" Text="45 Gb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                </Grid>
                            </Button.Content>
                        </Button>
                        <Button Style="{DynamicResource ButtonStyle1}">
                            <Button.Content>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="100"/>
                                        <ColumnDefinition Width="140"/>
                                        <ColumnDefinition Width="120"/>
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/folder.png" HorizontalAlignment="Left"/>
                                        <TextBlock Margin="5,0,0,0" Text="Collection 3" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
                                    </StackPanel>
                                    <TextBlock Grid.Column="1" Text="90 Items" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="2" Text="Mar 10, 2020" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="3" Text="82 Gb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                </Grid>
                            </Button.Content>
                        </Button>
                        <Button Style="{DynamicResource ButtonStyle1}">
                            <Button.Content>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="100"/>
                                        <ColumnDefinition Width="140"/>
                                        <ColumnDefinition Width="120"/>
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/Video.png" HorizontalAlignment="Left"/>
                                        <TextBlock Margin="5,0,0,0" Text="File Manager UI Part-1 by Jd's Code Lab" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
                                    </StackPanel>
                                    <TextBlock Grid.Column="1" Text="1 Item" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="2" Text="Jun 14, 2020" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="3" Text="1 Gb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                </Grid>
                            </Button.Content>
                        </Button>
                        <Button Style="{DynamicResource ButtonStyle1}">
                            <Button.Content>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="100"/>
                                        <ColumnDefinition Width="140"/>
                                        <ColumnDefinition Width="120"/>
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/Video.png" HorizontalAlignment="Left"/>
                                        <TextBlock Margin="5,0,0,0" Text="File Manager UI Part-2 by Jd's Code Lab" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
                                    </StackPanel>
                                    <TextBlock Grid.Column="1" Text="1 Item" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="2" Text="Jun 17, 2020" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="3" Text="4 Gb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                </Grid>
                            </Button.Content>
                        </Button>
                        <Button Style="{DynamicResource ButtonStyle1}">
                            <Button.Content>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="100"/>
                                        <ColumnDefinition Width="140"/>
                                        <ColumnDefinition Width="120"/>
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="/assets/Music.png" HorizontalAlignment="Left"/>
                                        <TextBlock Margin="5,0,0,0" Text="Some music track" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
                                    </StackPanel>
                                    <TextBlock Grid.Column="1" Text="1 Item" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="2" Text="March 19, 2019" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                    <TextBlock Grid.Column="3" Text="5 Mb" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                                </Grid>
                            </Button.Content>
                        </Button>

                    </StackPanel>

View Code

現在需要動態綁定數據，需要使用到數據模板，寫在Resource節點裏面：

<DataTemplate x:Key="UserDataTemplate">
            <Button Style="{DynamicResource ButtonStyle1}">
                <Button.Content>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="140"/>
                            <ColumnDefinition Width="120"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Image Margin="5,0,0,0" Width="50" Stretch="Uniform" Source="{Binding Path=FileExtensionImg}" HorizontalAlignment="Left"/>
                            <TextBlock Margin="5,0,0,0" Text="{Binding Path=FileName}" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" FontWeight="Bold" Foreground="LightSlateGray"/>
                        </StackPanel>
                        <TextBlock Grid.Column="1" Text="{Binding Path=ItemsCount}" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                        <TextBlock Grid.Column="2" Text="{Binding Path=LastModyTime}" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                        <TextBlock Grid.Column="3" Text="{Binding Path=FileSize}" VerticalAlignment="Center" TextAlignment="Left" HorizontalAlignment="Left" Foreground="LightSlateGray"/>
                    </Grid>
                </Button.Content>
            </Button>
        </DataTemplate>

View Code

更新後的StackPanel：

<StackPanel Orientation="Vertical">
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" />
 </StackPanel>

View Code

代碼綁定：

UserList.ItemsSource = list;

這樣做，還是方便。

結果：

【WPF】自定義數據集合綁定到UI界面

.net Mvc5Webapi接口接收參數爲null的一種情況分享

狀態機模式的初步瞭解及學習心得體會

微信小程序報錯“Component “頁面路徑“ does not have a method “ 方法名“ to handle event tap的

對象數組，根據字符串字段，並按默認方式排序

mvc5接口報錯：The JSON request was too large to be deserialized的一種原因

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結