將 model 動態綁定到網格 (UWP)

Question

我正在嘗試動態創建一個網格並將其綁定到一個列表視圖中。 我的代碼看起來像這樣我有一個 XAML 主頁。

<ListView x:Name="lvmain" ItemsSource="{Binding Path=columndetails}" 
            HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.HeaderTemplate>
            <DataTemplate>
                <Grid Background="Gray">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <uctrl:TableHeader></uctrl:TableHeader>
                </Grid>
            </DataTemplate>
        </ListView.HeaderTemplate>
    </ListView>

背后的代碼

    public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        DataContext = new MainViewModel();
    }
}
public class columndetail
{
    public string ColumnName { get; set; }
    public int ColumnId { get; set; }
}
public class MainViewModel
{
    private List<columndetail> _ColumnDetails = new List<columndetail>();
    public List<columndetail> ColumnDetails
    {
        get { return _ColumnDetails; }
        set { _ColumnDetails = value; }
    }
    public MainViewModel()
    {
        binddata();
    }
    public void binddata()
    {
        ColumnDetails.Add(new columndetail { ColumnId = 1, ColumnName = "Col1" });
        ColumnDetails.Add(new columndetail { ColumnId = 1, ColumnName = "Col2" });
        ColumnDetails.Add(new columndetail { ColumnId = 1, ColumnName = "Col3" });
        ColumnDetails.Add(new columndetail { ColumnId = 1, ColumnName = "col4" });
    }
}

我的用戶控件 (uctrl:TableHeader)

    <Grid x:Name="grdtblheader">
</Grid>

背后的代碼

   public sealed partial class TableHeader : UserControl
{
    public TableHeader()
    {
        this.InitializeComponent();
        DataContextChanged += (s, e) =>
        {
            if ((DataContext != null) && (DataContext is MainViewModel))
            {
                var cust = DataContext as MainViewModel;
                int col = 0;

                foreach (var colDet in cust.ColumnDetails)
                {
                    var colWidth = GridLength.Auto;
                    grdtblheader.ColumnDefinitions.Add(new ColumnDefinition() { Width = colWidth });
                    var tb = new TextBlock();
                    tb.Text = colDet.ColumnName;
                    Grid.SetColumn(tb, col);
                    grdtblheader.Children.Add(tb);
                    col++; 
                }
            }
        };
    }
}

我期待我的視圖模型數據中給出的 4 列 header 。 但是我得到一個 9 列 header 因為DataContextChanged事件被觸發了 4 次。 我該如何克服這個問題？ 我只想要一個 4 列 header 用於我的列表視圖，如上面的代碼所示。

Answer 1

只需在事件處理程序中清除 ColumnDefinitions 和 Children。

var cust = DataContext as MainViewModel;
int col = 0;

grdtblheader.ColumnDefinitions.Clear();
grdtblheader.Children.Clear();

foreach (var colDet in cust.ColumnDetails)
{
    var colWidth = new GridLength(1, GridUnitType.Star);// GridLength.Auto;
    grdtblheader.ColumnDefinitions.Add(new ColumnDefinition() { Width = colWidth });
    var tb = new TextBlock();
    tb.Text = colDet.ColumnName;
    Grid.SetColumn(tb, col);
    grdtblheader.Children.Add(tb);
    col++;
}