有一个要编辑的用户控件？

Question

我以前用 WPF 写过几个应用程序，但我不确定我应该怎么做：

我正在尝试制作一个 "Universal App"，在装有 win10 Iot 的 raspberry Pi 上面向小屏幕设计。

我想创建一个用户控件，它显示一个值，并且在单击时展开以占据全屏，允许我使用一些额外的按钮（显示在用户控件的展开版本中）很好地编辑它)（例如，数字步进 Up/Down，+ Ok/Cancel 按钮）。当我在这个扩展的用户控件中单击“确定”按钮时，它应该将 EditedValue 复制到 realValue (vars)。

我对如何用不同的显示器（不同的布局，不同的组件，完全取代 windows）做这部分有点困惑，希望得到一些帮助。

Answer 1

为什么不创建一个带有控件模板的用户控件，该控件模板会根据其模板的某些属性发生变化。带触发器的 ControlTemplate

Answer 2

您正在寻找的是手风琴控件。这些很容易实现，但可能需要一些工作才能很好地完成 look/animate。 HERE is an open source project with an example and docs. This duplicate question（我的意思是你的是重复的，另一个在前）也提供了多种解决方案。

解决问题的第二部分 - 如何适应小屏幕 - 有几个很好的设计指南。你可以看看 Apple Watch Human Interface Guidelines (that's certainly a small screen), or you could ask for recommendations in the UX/UI Stack Exchange.

Answer 3

@Jordy van Eijk 为您提供了一个可行的解决方案，但由于您要求提供示例，我将为您提供我自己的实现。请注意，您可以通过多种变体和其他方式来执行此操作，并且由于您的问题似乎很宽泛，我将只填写初始设计。

我的方法使用了 MVVM 设计模式：内容呈现器将绑定到视图模型并显示当前数据模板。数据模板会将视图模型关联到用户控件。用户控件包含您的视图、用于调整所选项目大小的绑定以及 show/hide 扩展显示的触发器。

内容主持人（MainWindow.xaml）：

<ContentPresenter Content="{Binding CurrentView}"/>

数据模板（MainWindow.xaml）：

<Window.Resources>
    <DataTemplate DataType="{x:Type viewModel:UserControl1ViewModel}" >
        <view:UserControl1/>
    </DataTemplate>
</Window.Resources>

用户控件（UserControl1.xaml）：

<UserControl.Resources>
    <Style x:Key="ExtendedControl" TargetType="Button">
        <Setter Property="Visibility" Value="Collapsed"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsVisible}" Value="True">
                <Setter Property="Visibility" Value="Visible"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

<Grid HorizontalAlignment="Left" Background="Blue" Width="525">
    <Button Content="Resize Control" VerticalAlignment="Top" HorizontalAlignment="Left" Width="{Binding Width}" Height="265" Command="{Binding ResizeCommand}" Margin="10,30,0,0"/>
    <Button Content="Extended Control" Style="{StaticResource ExtendedControl}" Margin="383,32,25,258"/>
</Grid>

用户控件 1 视图模型（UserControl1ViewModel.cs）：

    public class UserControl1ViewModel : ViewModelBase
{
    public ICommand ResizeCommand
    {
        get
        {
            if (_resizeCommand == null) _resizeCommand = new RelayCommand(ResizeButton, () => true);
            return _resizeCommand;
        }
    }

    public bool IsVisible
    {
        get { return _isVisible; }
        set
        {
            _isVisible = value;
            RaisePropertyChanged("IsVisible");
        }
    }

    public double Width
    {
        get { return _width; }
        set
        {
            _width = value;
            RaisePropertyChanged("Width");
        }
    }

    private RelayCommand _resizeCommand;

    private bool _isVisible;

    private double _width;

    public UserControl1ViewModel()
    {
        Width = 100.0;
        IsVisible = false;
    }

    private void ResizeButton()
    {
        Width = Application.Current.MainWindow.ActualWidth * .65;
        IsVisible = true;
    }
}

点击前：

点击后：

这概述了创建您指定的基本应用程序所需的主要部分。按下调整大小控件时，其宽度绑定更改为将其大小扩展到应用程序主 window 的 65%，并且扩展控件按钮的可见性绑定更改为 true。我包括调整大小的图片，但我的声誉还不允许这样做。我希望您像其他人所建议的那样将 MVVM 视为未来的架构模式，如果您有任何超出我的简单概述的问题，请随时与我联系。祝你好运！

编辑：基本视图模型、命令和绑定属性的类来自 MVVM Light 库。您可以使用以下方法将其从 visual studio 导入您的项目：工具 -> NuGet 包管理器 -> 管理解决方案的 NuGet 包 -> 搜索 "MVVM Light"

编辑 2

有关与您的评论相关的示例。我们有一个包含编辑器视图的父网格，该视图始终为最大 window 大小的 70% 以及我们扩展控制面板大小的绑定：

查看：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="7*"/>
        <ColumnDefinition Width="{Binding Width}"/>
    </Grid.ColumnDefinitions>

    <ContentPresenter Content="{Binding ViewManager.EditorControlView}" Grid.Column="0"/>
    <ContentPresenter Content="{Binding ViewManager.ExtendedControlView}" Grid.Column="1"/>
</Grid>

绑定：

public string Width
{
    get { return _width; }

    set
    {
        _width = value;
        RaisePropertyChanged("Width")
    }
}

//set our extended control to the other 30 percent of the window size
Width = "3*";

要根据 MVVM 标准正确更改此宽度，我们需要在我们的视图模型之间使用某种形式的通信，幸运的是，这是您可以从此处学习的另一课。正因为 iv 在整个示例中使用了 MVVM Light，所以我建议在 google 中搜索 "MVVM Light Messenger"，因为它提供了进行此通信的可靠方法。使用此功能，您只需提高更改宽度即可在应用程序的任何位置隐藏父视图中的其他 window 组件。 :D

有一个要编辑的用户控件？

Having a usercontrol that change to be edited?

c#

wpf

win-universal-app

iot