Наличие пользовательского контроля, изменение которого нужно отредактировать?

Question

Я уже писал несколько приложений в WPF, но не уверен, как мне это сделать:

Я пытаюсь создать «универсальное приложение», предназначенное для маленького экрана на малине Pi с win10 Iot.

Я хотел бы создать usercontrol, в котором отображается значение, и которое при нажатии открывается, чтобы перейти на полный экран, что позволяет мне редактировать его с помощью некоторых дополнительных кнопок (которые отображаются в расширенной версии usercontrol) (например, числовые кнопки Up/Down, + Ok/Cancel). И когда я нажимаю кнопку Ok в этом расширенном пользовательском контроле, он должен скопировать EditedValue в realValue (vars).

Я немного зациклен на том, как сделать деталь с другим дисплеем (разные макеты, разные компоненты, занимая все места в окнах) и хотел бы помочь.

Answer 1

@Jordy ван Eijk предоставил вам жизнеспособное решение, но так как вы просили пример я приведу вам с моим собственной реализации. Обратите внимание, что есть много вариантов и других способов, которыми вы можете это сделать, и поскольку ваш вопрос кажется довольно широким, я только заполню первоначальный дизайн.

В моем подходе используется шаблон проектирования MVVM: Презентатор контента привязывается к модели представления и покажет текущий шаблон данных. Шаблон данных будет относить модель представления к пользовательскому элементу управления. Пользовательский элемент управления содержит ваше представление, привязки для изменения размера выбранного элемента и триггеры для отображения/скрытия расширенного отображения.

Презентатор Содержание (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; 
    } 
} 

Перед Щелк:

После Click:

Это очерчивает основные части вам нужно будет создать базу приложения, как вы задающий. Когда нажата кнопка изменения размера, привязка ширины изменяется, чтобы увеличить ее размер до 65% основного окна приложения, а привязка видимости расширенной кнопки управления изменена на true. Идентификатор включает фотографии изменения размера, но моя репутация пока не позволяет. Надеюсь, вы заглянете в MVVM как будущую архитектурную модель, как предложили другие, и если у вас есть еще один вопрос, выходящий за рамки моего простого обзора, не стесняйтесь обращаться ко мне. Удачи!

Редактировать: классы для модели базового вида, команд и свойств связывания получены из библиотеки MVVM Light. Вы можете импортировать это в свой проект с визуальной студии с помощью: Инструменты -> Менеджер NuGet Package -> Управление NuGet Пакеты для решения -> поиск «MVVM Light»

Edit 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> 

Binding:

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 во всем этом примере, ID рекомендует искать google для «MVVM Light Messenger», поскольку он обеспечивает надежный способ выполнения этой связи. Используя это, вы можете просто увеличить ширину изменения, чтобы скрыть другие компоненты окна в родительском представлении из любого места приложения. : D

Answer 2

Почему бы не создать Usercontrol с помощью элемента управления, который изменит на некотором свойстве его шаблон. A ControlTemplate с триггерами

Answer 3

То, что вы ищете, является Аккордианским Управлением. Они просты в реализации, но это может занять немного работы, чтобы потом выглядеть/анимировать. HERE - проект с открытым исходным кодом с примером и документами. This duplicate question (под которым я имею в виду ваш дубликат, другой пришел первым) также предоставляет множество решений.

Обращаясь к второму компоненту вашего вопроса, как разместить небольшой экран, есть несколько хороших рекомендаций по дизайну. Вы можете посмотреть на Apple Watch Human Interface Guidelines (это, конечно, маленький экран), или вы можете обратиться за рекомендациями в UX/UI Stack Exchange.