如何使用MVVM在我的情况下单击“按钮”弹出usercontrol



我有一个窗口的情况,并且在此窗口上创建了复选框(动态确定了复选框的数量,我正在使用MVVM而不使用MVVM-Light(例如MVVM-light)使用MVVM或PRISM),选择这些复选框后,我单击一个按钮,此按钮也存在于同一窗口上。在单击此按钮时,必须弹出另一个窗口(假设graphdisplay.xaml是 usercontrol )。但是,此GraphDisplay将根据上一个窗口中完成的复选框选择显示一些图形。

我还必须将选定的复选框信息传递到GraphDisplay。例如,如果我检查了第二和第五个复选框,它可能会发送字符串" 2,5"的变量(如MessageBox中的给定格式http://prntscr.com/dh9u2s中的给定格式)。因此,GraphDisplay将仅显示第2和5点的图形(如此http://prntscr.com/dhakx4)

主视图模型中的我的按钮事件是这样的:

  public void MyAction()
        {
            string selectedCheckBoxes = verifyHowManyChecked(); //selectedCheckBoxes gives all the selcted checkboxes
            //appended by ","
            GraphDisplay gd = new GraphDisplay(selectedCheckBoxes); //I want to pass here the selcted values so that i can reuse it there decoding
            //them to get the selcted checkboxes
          // gd.Show() which will not work for sure because its not winform. So
        }

mainwindow.xaml是

<Window x:Class="DynamicCheckBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <ListView ItemsSource="{Binding AllActivities}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock  Text="{Binding Path=Name, Mode=TwoWay}" />
                        <CheckBox Background="Gray" IsChecked="{Binding Path=ID, Mode=TwoWay}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListView>
        <Button Grid.Row="1" Content="Plot" Height="20" Width="100" Command="{Binding PlotButton}"></Button>
    </Grid>
</Window>

graphdisplay.xaml是:

<UserControl x:Class="DynamicCheckBox.GraphDisplay"
             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:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <d3:ChartPlotter x:Name="plotter" Grid.Row="1" Grid.Column="1">
            <!--<d3:ChartPlotter.HorizontalAxis>
                <d3:HorizontalDateTimeAxis Name="dateAxis"/>
            </d3:ChartPlotter.HorizontalAxis>-->
            <d3:Header FontFamily="Georgia" Content="Voltage chart"/>
            <d3:VerticalAxisTitle FontFamily="Georgia" Content="Voltage [V]" />
            <d3:HorizontalAxisTitle FontFamily="Georgia" Content="Time"/>
            <d3:HorizontalLine Value="{Binding MaxVoltage}" Stroke="Red" StrokeThickness="2"/>
            <d3:HorizontalLine Value="{Binding MinVoltage}" Stroke="Red" StrokeThickness="2"/>
        </d3:ChartPlotter>
    </Grid>
</UserControl>

graphdisplay.xaml.cs是:

 public partial class GraphDisplay : UserControl, INotifyPropertyChanged
    {
        List<double> points_x_y_Graph1 = new List<double>() { 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 0.9, 0.8, 0.7 };
        List<double> points_x_y_Graph2 = new List<double>() { 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.0, 0.1, 0.2, 0.3 };
        private int _maxVoltage; private int _minVoltage;
    public int MaxVoltage
    {
        get { return _maxVoltage; }
        set { _maxVoltage = value; OnPropertyChanged("MaxVoltage"); }
    }
    public int MinVoltage
    {
        get { return _minVoltage; }
        set { _minVoltage = value; OnPropertyChanged("MinVoltage"); }
    }
    public VoltagePointCollection voltagePointCollection1;
    public VoltagePointCollection voltagePointCollection2;
    DispatcherTimer updateCollectionTimer;
    private int i = 0;
    public GraphDisplay()
    {
        InitializeComponent();
        this.DataContext = this;
        updateCollectionTimer = new DispatcherTimer();
        updateCollectionTimer.Interval = TimeSpan.FromMilliseconds(500);
        updateCollectionTimer.Tick += new EventHandler(updateCollectionTimer_Tick);
        updateCollectionTimer.Start();
        voltagePointCollection1 = new VoltagePointCollection();
        var ds1 = new EnumerableDataSource<VoltagePoint>(voltagePointCollection1);
        ds1.SetXMapping(x => x.time);
        ds1.SetYMapping(y => y.Voltage);
        plotter.AddLineGraph(ds1, Colors.Green, 2, "Volts 1");
        MaxVoltage = 1;
        MinVoltage = -1;
        voltagePointCollection2 = new VoltagePointCollection();
        var ds2 = new EnumerableDataSource<VoltagePoint>(voltagePointCollection2);
        ds2.SetXMapping(x => x.time);
        ds2.SetYMapping(y => y.Voltage);
        plotter.AddLineGraph(ds2, Colors.Blue, 2, "Volts 2");
    }
    void updateCollectionTimer_Tick(object sender, EventArgs e)
    {
        if (i < points_x_y_Graph1.Count)
        {
            //{ i = 0; }
            //For first graph
            voltagePointCollection1.Add(new VoltagePoint(points_x_y_Graph1[i], i));
            //For second graph
            voltagePointCollection2.Add(new VoltagePoint(points_x_y_Graph2[i], i)); // To add one more graph
            i++;
        }
    }

    #region INotifyPropertyChanged members
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
    }
    #endregion
}

如何在myAction()Indoke上弹出UserControl。以及如何将所选复选框传递到GraphDisplay UserControl,以便使用MVVM显示所选复选框图?

您可以将图形控件添加到mainWindow.xAML并绑定其可见性(例如,Isshowninggraph)(例如Isshowninggraph)(例如,如果需要),以可见性转换器。

按钮单击将更新ISSHAWNingGrid。

如果您真的想节省很多时间并遵循最佳实践,我强烈建议您使用一些MVVM框架。

但是,如果由于设计限制,您无法使用任何这些框架,那么您需要为查看模型交互实施自己的解决方案

我还建议您阅读有关Prism文档上的互动请求模式。尽管此处的内容同样适用于任何框架(即使您实现自己的解决方案)。

根据文档,在MVVM中实现通知和交互 在保持干净的问题的同时应用可能是一个非常 棘手的事情。

是,这是视图模型,负责与用户进行交互并获取和处理响应,而视图负责使用应用程序中使用的任何演示文稿技术向用户呈现交互UI。

两种主要常见方法:

使用交互服务:在此处,视图模型使用服务实现来启动与用户的交互,因此在这里,ViewModel通过DI/IOC具有依赖性IInteractionService

使用交互请求对象在此处,ViewModel会直接提出交互请求,以使用互动对象与视图中的行为相结合。

这是推荐的方法,也是棱镜中实现的方式。这是一个简单但非常强大的,并且可以正确地保持干净的关注点。

文档中还有很多,因此,如果您不能使用这些出色的框架,我再次强烈建议您仔细计划您如何实现解决方案。

希望这会有所帮助!

最新更新