Question

我之前曾在WPF中写过几个应用程序，但我不知道该如何做到这一点：

我正试图制作一个＃34; Universal App＆＃34;，设计用于覆盆子Pi上的小屏幕，带有win10 Iot。

我想创建一个usercontrol，它显示一个值，当点击时会展开以占据整个屏幕，允许我使用一些额外的按钮（在扩展版本的usercontrol中显示）很好地编辑它（例如，数字升高/降低，+确定/取消按钮）。当我在此扩展的usercontrol中单击Ok按钮时，它应该将EditedValue复制到realValue（vars）。

我有点不知道如何使用不同的显示器（不同的布局，不同的组件，占据窗户的所有位置）来做部件，并希望得到一些帮助。

Answer 1

为什么不使用controltemplate创建一个Usercontrol，它将在某个属性上更改其模板。带触发器的ControlTemplate

Answer 2

您正在寻找的是Accordian Control。这些很容易实现，但它可能需要一些工作才能使外观/动画很好。 HERE是一个带有示例和文档的开源项目。 This duplicate question（我的意思是你的是副本，另一个是第一个）也提供了各种解决方案。

解决问题的第二部分 - 如何容纳小屏幕 - 有几个很好的设计指南。您可以查看Apple Watch Human Interface Guidelines（这当然是一个小屏幕），或者您可以在UX/UI Stack Exchange.

中寻求建议

Answer 3

@Jordy van Eijk为您提供了一个可行的解决方案，但既然您要求举例，我将为您提供我自己的实施方案。请注意，有很多变化和其他方法可以做到这一点，因为你的问题似乎相当广泛，我只会填写初始设计。

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

Content Presenter（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;
    }
}

点击之前：

点击后：

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

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

修改2

有关您的评论的示例。我们有一个包含编辑器视图的父网格，该视图总是占最大窗口大小的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，我建议在谷歌搜索“MVVM Light Messenger”，因为它提供了一种可靠的方式来进行这种通信。使用此方法，您只需提高更改宽度，即可在应用程序的任何位置隐藏父视图中的其他窗口组件。：d

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

3 个答案: