Question

所以，我对C＃/ XAML相当新，并且一直试图通过重新编写一个旧项目来自学MVVM。我遇到了一个问题，应该将用户控件添加到uniformgrid。如果我自己实现它，则用户控件显示正常，但是如果我将它添加到ObservableCollection然后尝试将其绑定到uniformgrid the path to the user-control gets displayed rather than the actual UI element。不幸的是，我对C＃和MVVM有足够的新意，我无法确定问题的具体内容，这使得在线搜索变得困难。

<UserControl x:Class="CMS.Views.MonthView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:CMS.Views"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
    <ItemsControl ItemsSource="{Binding Dates}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid IsItemsHost="True" Columns="7"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
    </Grid>
</UserControl>

MonthView.cs

namespace CMS.Views
{
    public partial class MonthView : UserControl
    {
        public MonthView()
        {
            InitializeComponent();
            MonthViewModel monthViewModelObject = MonthViewModel.GetMonthViewModel();
            this.DataContext = monthViewModelObject;
        }
    }
}

MonthViewModel

namespace CMS.ViewModels
{
    class MonthViewModel
    {
        private readonly ObservableCollection<DayViewModel> _dates = new ObservableCollection<DayViewModel>();

        public IReadOnlyCollection<DayViewModel> Dates
        {
            get { return _dates; }
        }

        public static MonthViewModel GetMonthViewModel()
        {
            var month = new MonthViewModel();
            month.testdaymodel();
            return month;
        }

        public void testdaymodel()
        {
            DayViewModel DVM = DayViewModel.GetDayViewModel();
            DVM.LoadDate(DateTime.Now);
            _dates.Add(DVM);
        }
    }
}

DayView的XAML，其中包含DataTemplate

<UserControl x:Class="CMS.Views.DayView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:local="clr-namespace:CMS.Views" 
    mc:Ignorable = "d"
    MinWidth="100" MinHeight="100" BorderBrush="LightSlateGray" BorderThickness="0.5,0.5,1.5,1.5">

    <UserControl.Resources>
        <ResourceDictionary>
        </ResourceDictionary>
    </UserControl.Resources>

    <DataTemplate x:Name ="DayBox">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="21"/>
                <RowDefinition  Height="*"/>
            </Grid.RowDefinitions>
            <Border x:Name="DayLabelRowBorder" CornerRadius="2" Grid.Row="0" BorderBrush="{x:Null}" Background="{DynamicResource BlueGradientBrush}">
                <Label x:Name="DayLabel" Content="{Binding Path = Info.Day, Mode = OneWay}" FontWeight="Bold" FontFamily="Arial"/>
            </Border>

            <!--This will be bound to the event schedule for a given day-->
            <StackPanel Grid.Row="1" x:Name="DayAppointmentsStack" HorizontalAlignment="Stretch" Background="White" VerticalAlignment="Stretch">
            </StackPanel>
        </Grid>
    </DataTemplate>
</UserControl>

Answer 1

编辑：无论您使用Label之类的简单控件还是DayView等自己的控件，相同的规则都适用。

您需要设置ItemsControl.ItemTemplate，IReadOnlyCollection<DayViewModel>将绑定到DataTemplate中的每个项目。

然后，根据自己的喜好制作<ItemsControl ItemsSource="{Binding Dates}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid IsItemsHost="True" Columns="7"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate>  <local:DayView />  </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>。像这样：

DayViewModel

您没有显示PropertyToDisplay课程，因此您只需将DayView更改为您希望视图显示的实际属性。

编辑：制作ItemsControl.Template type会自动将其绑定到ItemSource中DayView项。

这意味着您可以UserControl将DayViewModel视为DataContext View作为其DayView，而无需明确设置。

我假设您Grid的实际DataTemplate是<UserControl x:Class="CMS.Views.DayView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:CMS.Views" mc:Ignorable = "d" MinWidth="100" MinHeight="100" BorderBrush="LightSlateGray" BorderThickness="0.5,0.5,1.5,1.5"> <UserControl.Resources> <ResourceDictionary> </ResourceDictionary> </UserControl.Resources>  <Grid> <Grid.RowDefinitions> <RowDefinition Height="21"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border x:Name="DayLabelRowBorder" CornerRadius="2" Grid.Row="0" BorderBrush="{x:Null}" Background="{DynamicResource BlueGradientBrush}"> <Label x:Name="DayLabel" Content="{Binding Path = Info.Day, Mode = OneWay}" FontWeight="Bold" FontFamily="Arial"/> </Border>  <StackPanel Grid.Row="1" x:Name="DayAppointmentsStack" HorizontalAlignment="Stretch" Background="White" VerticalAlignment="Stretch"> </StackPanel> </Grid>  </UserControl>内的foreach，所以我只修改了以下代码：

DayView.xaml

foreach

ObservableCollection中绑定的用户控件不会出现在uniformgrid

1 个答案: