朧の.Netの足跡
問合せ先:support@oborodukiyo.info サイト内検索はこちら 
UWP ListViewを使ってDataGridみたいなものを作ってみる





UWPではDataGridライクなものがないので似た感じになるようにしてみました。
(現在はToolkitで正式版が提供されています。こちらも参照を。ToolkitのDataGrid
ListViewだけではカラムヘッダーがないので、ListViewと同じ幅でListViewの上側にカラムヘッダー部分をListViewのデータ表示部分のGridをほぼまねて作成します。
ListViewの方ではListView.ItemTemplateのDataTemplateにカラムヘッダーのGridと同じ構成にします。
ここでカラム幅をユーザは変更できないので、カラム内で少しマージンを充てます。
そうしないと見ずらいです。


MainPage.xaml

        <Grid Height="30" Margin="10,87,10,0" VerticalAlignment="Top" Background="#FFD0D3D3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="60" />
                <ColumnDefinition Width="150" />
                <ColumnDefinition Width="200" />
                <ColumnDefinition Width="300" />
                <ColumnDefinition Width="200" />
            </Grid.ColumnDefinitions>
            <TextBlock x:Uid="GridResult" Grid.Column="0" Text="結果" Margin="5,0,5,0" />
            <TextBlock x:Uid="GridStatus" Grid.Column="1" Text="status" Margin="5,0,5,0" />
            <TextBlock x:Uid="GridRExternal" Grid.Column="2" Text="外部" Margin="5,0,5,0" />
            <TextBlock x:Uid="GridErrorMessage" Grid.Column="3" Text="エラー" Margin="5,0,5,0" />
            <TextBlock x:Uid="GridOriginalURL" Grid.Column="4" Text="元々のURL" Margin="5,0,5,0" />
            <TextBlock x:Uid="GridInterpretedURL" Grid.Column="5" Text="解釈したURL" Margin="5,0,5,0" />
            <TextBlock x:Uid="GridPageURL" Grid.Column="6" Text="ページ" Margin="5,0,5,0" />
        </Grid>
            
        <ListView ItemsSource="{Binding Path=Data}" Margin="10,122,10,10" Background="#FF90D0E8">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="60" />
                            <ColumnDefinition Width="150" />
                            <ColumnDefinition Width="200" />
                            <ColumnDefinition Width="300" />
                            <ColumnDefinition Width="200" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Path=Result}" Grid.Column="0" Margin="5,0,5,0" />
                        <TextBlock Text="{Binding Path=StatusCode}" Grid.Column="1" Margin="5,0,5,0" />
                        <TextBlock Text="{Binding Path=External}" Grid.Column="2" Margin="5,0,5,0" />
                        <TextBlock Text="{Binding Path=ErrorMessage}" Grid.Column="3" TextWrapping="Wrap" Margin="5,0,5,0" />
                        <TextBlock Text="{Binding Path=Original}" Grid.Column="4" TextWrapping="Wrap" Margin="5,0,5,0" />
                        <TextBlock Grid.Column="5" Margin="5,0,5,0" TextWrapping="Wrap">
                            <Hyperlink NavigateUri="{Binding Path=InterpretedURL}"><run Text="{Binding Path=InterpretedURL}" /></Hyperlink>
                        </TextBlock>
                        <TextBlock Grid.Column="6" Margin="5,0,5,0" TextWrapping="Wrap">
                            <Hyperlink NavigateUri="{Binding Path=Page}"><run Text="{Binding Path=Page}" /></Hyperlink>
                        </TextBlock>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        









良いやや良い普通やや悪い悪い

投稿日時評価コメント