使用MVVM模式

时间:2015-12-01 15:54:33

标签: c# wpf xaml mvvm dynamically-generated

我正在尝试向UserControl添加按钮。我必须遵循MVVM模式。我创建了一个类DeviceButton,它具有不同的set / gets和构造函数。在用作datacontext的viewmodel中,是ObservableCollection和集合的get方法。我已将该集合绑定到ItemsControl源并尝试添加模板。我想我错过了一些东西,因为按钮不会加载。

UserControl被添加到一个选项卡中(使用dragablz),它也是ObservableCollection的一部分,也是在运行时添加的(这很好用)。这个想法是,该选项卡有一个必须在运行时创建的按钮列表,其中列表是从Web服务获取的 - 因此必须动态/以编程方式添加按钮。概述只是第一个选项卡 - 当按钮工作时,每个选项卡的模板(反映所提取的项目)正在实施。现在,我只是在集合中添加一个测试按钮,但如上所述,这不会显示。我错过了什么?

我有一个Overview.xaml文件:

<UserControl // attributes omitted to save spaces... ask if needed>

<StackPanel>
    <Border>
        <TextBlock FontSize="16" FontWeight="Bold" TextWrapping="WrapWithOverflow"
                   TextAlignment="Center" HorizontalAlignment="Center"
                   Foreground="{DynamicResource AccentColorBrush}">
            Welcome to Greenhouse App
        </TextBlock>
    </Border>

    <ItemsControl ItemsSource="{Binding DeviceButtons}">
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type vmodel:DeviceButton}">
                <Button Width="50" Height="50" Margin="10 10 0 0" Command="{Binding OpenTab}"
                        CommandParameter="{Binding DeviceType}" HorizontalAlignment="Left"
                        VerticalAlignment="Top" Style="{DynamicResource SquareButtonStyle}">
                    <StackPanel>
                        <Image Source="{Binding ImageUrl}" />
                    </StackPanel>
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

    // Manually added test button...
    <Button x:Name="windMill" HorizontalAlignment="Left" Margin="10,0,0,0"
            VerticalAlignment="Top" Width="50" Height="50"
            Command="{Binding OpenTab}" FontFamily="Segoe Ui"
            Style="{DynamicResource SquareButtonStyle}">
        <StackPanel>
            <Image Source="/Greenhouse;component/Icons/Windmill.png" />
        </StackPanel>
    </Button
</StackPanel>

我试图添加一个类型为DeviceButton的ObservableCollection,_deviceButtons集合(作为ItemsSource绑定到ItemsControl)

tabList项目正在查找,我可以根据需要手动添加更多(稍后将通过OpenNewTab命令添加,这些命令应绑定到按钮)

DeviceButton文件:

public class DeviceButton
{
    private readonly string _content;
    private readonly string _deviceType;
    private readonly string _imageUrl;

    public DeviceButton(string content, string deviceType, string imageUrl)
    {
        _content = content;
        _deviceType = deviceType;
        _imageUrl = imageUrl;
    }

    public string Content
    {
        get { return _content; }
    }

    public string DeviceType
    {
        get { return _deviceType; }
    }

    public string ImageUrl
    {
        get { return _imageUrl; }
    }
}

该集合位于一个viewmodel文件MainWindowViewModel.cs中:

public class MainWindowViewModel : ViewModelBase, INotifyPropertyChanged
{
    public ICommand OpenTab { get; set; }

    private string tabControl { get; set; } = "0";
    private IInterTabClient _interTabClient;
    private ObservableCollection<TabContent> _tabContents = new ObservableCollection<TabContent>();
    private ObservableCollection<DeviceButton> _deviceButtons = new ObservableCollection<DeviceButton>();

    public MainWindowViewModel()
    {
        _interTabClient = new MyInterTabClient();

        DeviceButtons.Add(new DeviceButton("Windturbine", "windturbine", "/Greenhouse;component/Icons/Windmill.png"));

        TabContents.Add(new TabContent("Overview", new Overview()));

        OpenTab = new RelayCommand<object>(OpenNewTab);
    }

    private void OpenNewTab(object obj)
    {
        MessageBox.Show("Yo"); // Not yet implemented
        RaisePropertyChanged(() => tabControl);
    }

    public ObservableCollection<TabContent> TabContents
    {
        get { return _tabContents; }
    }

    public ObservableCollection<DeviceButton> DeviceButtons
    {
        get { return _deviceButtons; }
    }

    public IInterTabClient InterTabClient
    {
        get { return _interTabClient; }
    }
}

启动程序时没有加载按钮(仅在WPF中手动添加&#34;测试&#34;按钮)。

UserControl,Overview,被视为另一个Controls.Metrowindow,MainWindow.xaml中的选项卡:

<Window.Resources>
    <Style TargetType="{x:Type dragablz:TabablzControl}">
        <Setter Property="CustomHeaderItemTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type viewmodel:TabContent}">
                    <TextBlock Text="{Binding Header}" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type viewmodel:TabContent}">
                    <ContentPresenter Margin="4" Content="{Binding Content}" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<dragablz:TabablzControl SelectedIndex="{Binding tabControl}" ItemsSource="{Binding TabContents}" x:Name="InitialTabablzControl" Margin="4 0 4 4">
    <dragablz:TabablzControl.InterTabController>
        <dragablz:InterTabController InterTabClient="{Binding MyInterTabClient}" />
    </dragablz:TabablzControl.InterTabController>
</dragablz:TabablzControl>

我想这是Overview.xaml中资源/绑定的问题,但我已经用尽了所有可以找到的建议解决方案。

2 个答案:

答案 0 :(得分:1)

我怀疑DataContext被设置为TabContent对象,该对象没有DeviceButtons属性

我建议您使用Snoop之类的工具来验证您的DataContext是否符合预期。

答案 1 :(得分:1)

问题在于绑定

$datetime1 = new DateTime($asset[$a]['PDate']);
$datetime2 = new DateTime("now");
$interval = $datetime1->diff($datetime2);
$different= $interval->format('%y years %m months and %d days');

//eg :$different= '1 years 1 months and 7 days';
$a=explode(' ',$different);
print_r($a);
if($a[0]>0){
$y=$a[0]."years  ";
}else{$y="";}
if($a[2]>0){
$m=$a[2]."months  ";
}else{$m="";}
if($a[5]>0){
$d=$a[5]."days   ";
}
echo $y,$m,$d;