在“材料设计”对话框WPF中插入用户控件

时间:2018-10-20 17:29:04

标签: wpf caliburn.micro material-design-in-xaml

我试图了解WPF中xaml的材料设计,目前我正在研究Dialog Host。我试图将UserControl放入材料设计对话框主机中,但由于某种原因它无法正常工作,我在Caliburn Micro FW中使用了材料设计。

MainView.xaml

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <!--ROW 0-->
    <Button Content="Show Dialog" Grid.Row="0" Grid.Column="0" x:Name="OpenDialog"/>
    <!--ROW 1-->
    <materialDesign:DialogHost Grid.Row="1" Grid.Column="0" IsOpen="{Binding IsDialogOpen}" CloseOnClickAway="True">
        <materialDesign:DialogHost.DialogContent>
            <StackPanel Margin="20">
                <ContentControl x:Name="ActiveItem"/>
            </StackPanel>
        </materialDesign:DialogHost.DialogContent>
    </materialDesign:DialogHost>
</Grid>

MainViewModel.cs

    private bool _isDialogOpen;
    public bool IsDialogOpen
    {
        get { return _isDialogOpen; }
        set
        {
            _isDialogOpen = value;
            NotifyOfPropertyChange(() => IsDialogOpen);
        }
    }

    public LoginViewModel()
    {
        MyCustomers.Add("Dhairya Joshi");
        MyCustomers.Add("Irfan Shethia");
        MyCustomers.Add("Imran Shethia");
    }

    public void OpenDialog()
    {
        IsDialogOpen = true;
        ActivateItem(new CustomersListViewModel());
    }

CustomerView.xaml

<StackPanel Orientation="Vertical">
    <ListBox x:Name="MyCustomers"/>
</StackPanel>

CustomerViewModel.cs

private List<string> _myCustomers = new List<string>();
    public List<string> MyCustomers
    {
        get { return _myCustomers; }
        set {
            _myCustomers = value;
            NotifyOfPropertyChange(() => MyCustomers);
        }
    }

    public CustomersListViewModel()
    {
        MyCustomers.Add("Dhairya Joshi");
        MyCustomers.Add("Irfan Shethia");
        MyCustomers.Add("Imran Shethia");
    }

现在它正像这样的屏幕截图显示

enter image description here

注意:我试图将<contentControl>放在新行中,并且相同的代码确实可以正常工作,但是当我在DialogHost中使用它时,它只是不显示。试图也删除StackPanel,只留下<contentcontrol>,但仍然无法正常工作。

更新:

最后我能够将其置于工作状态,但再次出现另一个问题是用户控件内的ListBox未被填充。

我如何在对话框中显示用户控件:

1)MainView.xaml

<materialDesign:DialogHost Grid.Row="2" Grid.Column="0" IsOpen="{Binding IsDialogOpen}" CloseOnClickAway="True" Identifier="RootDialog">

2)MainViewModel.cs

public async void OpenDialog()
    {
        //IsDialogOpen = true;


        var view = new CustomersListView
        {
            DataContext = new CustomerListViewModel();
        };

        //show the dialog
        var result = await DialogHost.Show(view, "RootDialog", ExtendedOpenedEventHandler, ExtendedClosingEventHandler);
    }

    private void ExtendedOpenedEventHandler(object sender, DialogOpenedEventArgs eventargs)
    {
        Console.WriteLine("Detecting Opened Event");
    }
    private void ExtendedClosingEventHandler(object sender, DialogClosingEventArgs eventArgs)
    {

    }

如果我直接运行usercontrol,则会填充listview,但是当我在对话框中这样做时,它不会填充。不知道为什么。

1 个答案:

答案 0 :(得分:0)