如何从 UWP 中的视图模型访问用户控件？答案

【问题标题】：How to access a user control from a View Model in UWP?如何从 UWP 中的视图模型访问用户控件？
【发布时间】：2020-10-16 15:05:39
【问题描述】：

我有一个 UWP，其中我在 file1.xaml 中定义了一个用户控件

<UserControl>
  <Grid x:Name="A">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="DemoStates">
            <VisualState x:Name="State1"/>
            <VisualState x:Name="State2">
                <Storyboard
                    x:Name="StoryboardDemo"
                    FillBehavior="HoldEnd">
                    <DoubleAnimationUsingKeyFrames
                        EnableDependentAnimation="True"
                        Storyboard.TargetName="DemoStateChange"
                        Storyboard.TargetProperty="(SomeProperty)">
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid x:Name="StoryboardDemo">
         <Image
            Source="//assets//Image1.jpg"/>
         <Image
            Source="//assets//Image2.jpg"/>
 </UserControl>

我在另一个 xaml 文件 file2.xaml 中使用这个用户控件

<Grid>
     <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <control:file1/>
   <ToggleSwitch
        Grid.Row="1"
        Toggled="{x:Bind ViewModel.ChangeImage}"/>
 </Grid>

如果用户在情节提要上切换切换开关应该进入状态2，如果它关闭它应该进入状态1。我正在尝试通过视图模型控制这个情节提要

File2ViewModel.cs

    public void ChangleImage(object sender, RoutedEventArgs e)
    {
        Windows.UI.Xaml.Controls.ToggleSwitch toggleSwitch = sender as Windows.UI.Xaml.Controls.ToggleSwitch;
        if (toggleSwitch != null)
        {
            if (toggleSwitch.IsOn == true)
            {
                VisualStateManager.GoToState(file1 , "state2", false); //get an error for the first parameter
            }
            else
            {
                VisualStateManager.GoToState(file1, "state1", false);//get an error for the first parameter
            }
        }

如何触发用户控件从 ViewModel 启动情节提要？此外，如果切换切换，我想发送一个值来操纵“someproperty”回用户控件，以便它可以基于此操纵视图，是否有可能实现这一点？

【问题讨论】：

file1 是类名，而不是您在 Xaml 代码中创建的控件对象。您可以给用户控件起一个名称，例如<local:file1 x:Name="MyControl1"/>。然后调用VisualStateManager.GoToState(MyControl1, "state2", false);之类的方法
我尝试访问“Control1”，但在 VisualStateManager 中仍然出现错误，提示找不到上下文。我有这样的和 VisualStateManager.GoToState(MyControl1, "state2", false);

标签： uwp uwp-xaml

【解决方案1】：

我误解了您的代码。您将 ChangleImage method 放入 ViewModel 中。您可以在File2ViewModel 中设置一个属性并将控件分配给该属性。

我根据你的场景做了一个简单的demo

File2ViewModel：

 public class File2ViewModel
{
    public file1 thefile { get; set; }

    public File2ViewModel(file1 file)
    {
        thefile = file;
    }

    public void ChangleImage(object sender, RoutedEventArgs e)
    {
        Windows.UI.Xaml.Controls.ToggleSwitch toggleSwitch = sender as Windows.UI.Xaml.Controls.ToggleSwitch;
        if (toggleSwitch != null)
        {
            if (toggleSwitch.IsOn == true)
            {
                VisualStateManager.GoToState(thefile, "state2", false); //get an error for the first parameter
                Debug.WriteLine("test");
            }
            else
            {
                VisualStateManager.GoToState(thefile, "state1", false);//get an error for the first parameter
                Debug.WriteLine("test");
            }
        }
    }
 }

在file2后面的代码中：

 public File2ViewModel viewModel { get; set; }
 viewModel = new File2ViewModel(MyControl1);

MyControl1 是您添加到 file2 xaml 的 file1 控件。

【讨论】：