Привязать модель к сетке динамически (UWP) - PullRequest
Новая
       5

Привязать модель к сетке динамически (UWP)

0 голосов
/ 11 апреля 2020

Я пытаюсь создать сетку динамически и связать ее в представлении списка. Мой код выглядит следующим образом: у меня есть главная страница 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" });
    }
}

Мой Usercontrol (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 столбцов, как указано в моих данных viewmodel. Но я получаю заголовок из 9 столбцов, так как событие DataContextChanged запускается 4 раза. Как я могу преодолеть эту проблему? Я просто хочу заголовок из 4 столбцов для моего списка, как показано в коде выше.

1 Ответ

1 голос
/ 12 апреля 2020

Просто очистите 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++;
}
...