将 Gridview 添加到导致 UI 设计更改的静态模板

Question

我是xaml的新手..刚开始学习。

我使用网格设计了一个静态模板。我需要这个网格根据基于 C#

的对象重复

因此我包含了 GridView 和绑定。

在添加 Gridview 之前 enter image description here

将网格视图添加到网格后 enter image description here

我的代码在XAML

<GridView ItemsSource="{Binding Source={StaticResource UpcomingEvent}}"
              ScrollViewer.HorizontalScrollBarVisibility="Hidden" Padding="0"
              Margin="0,0,0,0" Grid.Column="0" Height="auto">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid Name="DataLabels">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="3*" />
                                            <ColumnDefinition Width="9*" />
                                            <ColumnDefinition Width="3*" />
                                        </Grid.ColumnDefinitions>
                                        <Border Grid.Column="0" Margin="7">
                                            <Border.Background>
                                                <LinearGradientBrush>
                                                    <GradientStop Color="#FFD3D3D3" Offset="0" />
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                        <Grid Margin="7">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="3*"/>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="*"/>
                                            </Grid.RowDefinitions>
                                            <TextBlock FontSize="30"  Text="{Binding Date}"></TextBlock>
                                            <TextBlock Grid.Row="1"  Text="{Binding Month}"></TextBlock>
                                            <TextBlock Grid.Row="2"  Text="{Binding Year}"></TextBlock>
                                        </Grid>
                                        <Grid Grid.Column="1">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <TextBlock Grid.Row="0" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Path=Heading}"></TextBlock>
                                            <TextBlock Grid.Row="1" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Path=Description}"></TextBlock>
                                        </Grid>
                                        <TextBlock Grid.Column="2" FontSize="15" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding Time}"></TextBlock>
                                    </Grid>
                                    <Border Grid.Row="1" BorderBrush="#FFD3D3D3" BorderThickness="1" Margin="10,0,0,0"/>
                                </Grid>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                    </GridView>

C#代码：

    public List<UpcommingEvent> GetUpcomingEvent()
    {
        List<UpcommingEvent> data = new List<UpcommingEvent>();
        data.Add(new UpcommingEvent() { Date = "2", Time = "00:45AM", Description = "fds My first dynamic message 1", Heading = "Fist Message", Month = "Dec", Year = "2015" });
        data.Add(new UpcommingEvent() { Date = "3", Time = "01:45AM", Description = "rewd My first dynamic message 2", Heading = "Second Message", Month = "Dec", Year = "2015" });
        data.Add(new UpcommingEvent() { Date = "4", Time = "01:45AM", Description = "fdf My first dynamic message 3", Heading = "Second Message", Month = "Dec", Year = "2015" });
        data.Add(new UpcommingEvent() { Date = "5", Time = "01:00PM", Description = "vfc My first dynamic message 4", Heading = "Second Message", Month = "Dec", Year = "2015" });
        data.Add(new UpcommingEvent() { Date = "6", Time = "12:45PM", Description = "kjh My first dynamic message 5", Heading = "Second Message", Month = "Dec", Year = "2015" });
        return data;
    }

    public DashboardPage()
    {
        this.InitializeComponent();
        UpcomingEvent.Source = GetUpcomingEvent();
    }

是什么导致动态 UI 与静态不同，我应该如何解决它？

谢谢

Answer 1

首先，您输入的是 GridView 而不是 ListView。 GridView 中不存在 ItemTemplate。

我对你的模板做了一些修改：

<ListView x:Name="LstView1">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid Name="DataLabels" Width="400">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="75" />
                        <ColumnDefinition Width="9*" />
                        <ColumnDefinition Width="4*" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.Column="0" Margin="7">
                        <Border.Background>
                            <LinearGradientBrush>
                                <GradientStop Color="Red" Offset="0" />
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                    <Grid Margin="7" Background="Purple">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="3*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                    <TextBlock FontSize="30"  HorizontalAlignment="Center" Text="{Binding Date}"></TextBlock>
                    <TextBlock Grid.Row="1"  HorizontalAlignment="Center" Text="{Binding Month}"></TextBlock>
                    <TextBlock Grid.Row="2"  HorizontalAlignment="Center" Text="{Binding Year}"></TextBlock>
                    </Grid>
                    <Grid Grid.Column="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Path=Heading}"></TextBlock>
                        <TextBlock Grid.Row="1" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding Path=Description}"></TextBlock>
                    </Grid>
                    <TextBlock Background="Yellow" Grid.Column="2" FontSize="15" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding Time}"></TextBlock>
                </Grid>
             </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

检查模板并判断它是否符合您的需要。

将 Gridview 添加到导致 UI 设计更改的静态模板

Add Gridview to a static template causing UI design changes

wpf

xaml

gridview

windows-applications