WPF 實現類似C#中ListView大圖標模式，加入鏈接

 近來，因爲工作原因，要做wpf。學習並用wpf寫了幾天，發現wpf真的很靈活。

以WPF 實現類似C#中ListView大圖標模式來說，雖然有人用滾動視圖加WrapPanel的自定義方式實現，但是我覺得沒必要把問題想的太複雜，因爲wpf本身是很靈活的。

下面是我從msdn的論壇上copy過來的代碼，看看就知道了。

 

<ListBox Name="AppListBox" Background ="Transparent" ItemsSource="{Binding}" ScrollViewer.CanContentScroll="True">

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <WrapPanel/>

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <Grid >

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto" ></RowDefinition>

                            <RowDefinition Height="Auto" ></RowDefinition>

                        </Grid.RowDefinitions>

                        <Image Source="{Binding Pic}"/>

                        <TextBlock Text="{Binding Name}" Grid.Row="1"/>

                    </Grid>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

後臺代碼：

        namespace StyleWorkAround

{

    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    public partial class MainWindow : Window

    {

        ObservableCollection<LVData> LVDatas = new ObservableCollection<LVData>();

        public MainWindow()

        {

            InitializeComponent();

            LVDatas.Add(new LVData { Name = "圖ª?片?1", Pic = "http://www.google.com/intl/en_ALL/images/logo.gif" });

            LVDatas.Add(new LVData { Name = "圖ª?片?2", Pic = "http://www.google.com/intl/en_ALL/images/logo.gif" });

            AppListBox.ItemsSource = LVDatas;

        }

    }

 

    public class LVData

    {

        public string Name { get; set; }

        public string Pic { get; set; }

    }

}

這個代碼是完全可以工作的。

來自：http://social.msdn.microsoft.com/Forums/zh-CN/wpfzhchs/thread/f9b5fb48-4373-4373-9609-01273dcd217f，感謝Sheldon _Xiao的爲我們提供的代碼。

 

其實，我想要的是下面的效果：

<ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="64" ></ColumnDefinition>
                            <ColumnDefinition Width="64" ></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding Pic}"/>
                        <TextBlock Text="{Binding Name}" Grid.Column="1"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>

當然更改起來很簡單了。
 

當然，你還有可以實現文件和鏈接的組合：

<DataTemplate>
                                                <StackPanel>
                                                    <TextBlock Text="{Binding xxx}"   />
                                                    <Label x:Name="lblFormalList" HorizontalAlignment="Left"   VerticalAlignment="Top"  >
                                                        <Hyperlink x:Name="hyperlink" Click="hyperlink_Click"   >
                                                            <TextBlock Text="嘻嘻嘻" />
                                                        </Hyperlink>
                                                    </Label>
                                                </StackPanel>
                                            </DataTemplate>

 

 

雖然上面用的都是listbox，我將其改爲listview一樣使用。