Каковы лучшие практики для динамического создания представлений и добавления элементов управления для просмотра с использованием шаблона MVVM - PullRequest
Новая
       50

Каковы лучшие практики для динамического создания представлений и добавления элементов управления для просмотра с использованием шаблона MVVM

0 голосов
/ 12 сентября 2011

Может ли кто-нибудь предложить лучшие практики для игры с элементами управления во время выполнения, такие как создание нового представления, добавление представлений в представление, добавление элементов управления в контейнеры с использованием шаблона MVVM без нарушения шаблона mvvm ??

Я использую инструментарий MVVMlight ..

Пожалуйста, помогите мне в этом отношении ..

Заранее спасибо ......

1 Ответ

0 голосов
/ 14 сентября 2011

В этом посте обсуждаются стратегии создания представлений (диалогов) из ваших моделей представлений.

Редактировать:

Из вашего комментария я беруэто то, что вы получили пользовательский интерфейс, который имеет кнопку добавления и удаления.Кнопка добавления должна добавить элемент (тип?) К ItemsControl ... надеюсь, что это правильно.

Итак, как бы я это сделал, я бы создал модель представления с ObservableCollecion<ItemViewModel>.,ItemViewModle - это режим просмотра, представляющий элемент, который должен быть добавлен к ItemsControl (так что в вашем случае модель представления поддерживает ваш «rangeView»).

Затем я бы добавил две команды, которые обрабатываютдобавление и удаление предметов.Обе команды просто добавляют / удаляют ItemViewModels из вашей коллекции.

Чтобы показать элементы в представлении, я бы привязал свойство ItemControl.ItemsSource к коллекции в вашей модели основного вида (то есть той, которая содержит * 1021).* экземпляры).Я бы предоставил ItemTemplate для отображения элементов на экране.

Хорошо, вот пример того, что, я думаю, вы пытаетесь сделать (по крайней мере, концептуально). Полный исходный код здесь .В примере я использовал ListBox, поскольку он позволяет мне легко определить, какой элемент выбран, это зависит от вашего сценария.Также обратите внимание, что у вас есть полная свобода для настройки Template, ItemPanelTemplate и DataTemplate в соответствии с вашими потребностями.Вы даже можете использовать этот подход для создания PanoramaPages в WP7 !

2-е редактирование : ItemsControl не имеет свойства SelectedItem.Чтобы добраться до него, вы должны использовать элемент управления, унаследованный от Selector (например, ListBox, как я это сделал) или вы можете использовать Selector напрямую.

ItemViewModel: 

public class ItemViewModel : ViewModelBase
{
    #region [Name]

    public const string NamePropertyName = "Name";

    private string _name = null;

    public string Name {
        get {
            return _name;
        }

        set {
            if (_name == value) {
                return;
            }

            var oldValue = _name;
            _name = value;

            RaisePropertyChanged(NamePropertyName);
        }
    }

    #endregion
}

MainViewModel: 

public class MainViewModel : ViewModelBase
{
    public MainViewModel() {
        if (IsInDesignMode) {
            this.Items = new ObservableCollection<ItemViewModel>(Enumerable.Range(0, 10).Select((x, i) => new ItemViewModel() { Name = "Design Time Item " + i }));
        } else {
            // Code runs "for real"
        }
    }

    #region [AddCommand]

    private RelayCommand _addCommand;

    public RelayCommand AddCommand {
        get {
            return _addCommand ?? (_addCommand = new RelayCommand(
                () => {
                    this.Items.Add(new ItemViewModel() { Name = "New item - " + DateTime.Now });
                }
            ));
        }
    }

    #endregion

    #region [DeleteCommand]

    private RelayCommand _deleteCommand;

    public RelayCommand DeleteCommand {
        get {
            return _deleteCommand ?? (_deleteCommand = new RelayCommand(
                () => {
                    this.Items.Remove(this.SelectedItem);
                },
                () => { return this.SelectedItem != null; }
            ));
        }
    }

    #endregion

    #region [Items]

    public const string ItemsPropertyName = "Items";

    private ObservableCollection<ItemViewModel> _items = new ObservableCollection<ItemViewModel>();

    public ObservableCollection<ItemViewModel> Items {
        get {
            return _items;
        }

        set {
            if (_items == value) {
                return;
            }

            var oldValue = _items;
            _items = value;

            RaisePropertyChanged(ItemsPropertyName);
        }
    }

    #endregion

    #region [SelectedItem]

    public const string SelectedItemPropertyName = "SelectedItem";

    private ItemViewModel _selectedItem = null;

    public ItemViewModel SelectedItem {
        get {
            return _selectedItem;
        }

        set {
            if (_selectedItem == value) {
                return;
            }

            var oldValue = _selectedItem;
            _selectedItem = value;

            RaisePropertyChanged(SelectedItemPropertyName);

            // important in SL to notify command that can execute has changed !
            this.DeleteCommand.RaiseCanExecuteChanged();
        }
    }

    #endregion
}

MainPage.xaml 

<UserControl 
    x:Class="MvvmLight1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Height="300"
    Width="300"
    DataContext="{Binding Main, Source={StaticResource Locator}}"
>

    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Skins/MainSkin.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <ListBox Grid.Row="0" ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="Margin" Value="0"/>
                    <Setter Property="Padding" Value="0"/>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                    <DataTemplate>
                    <!-- we are dealing with ItemViewModels now -->
                    <Border BorderThickness="0,0,0,1" BorderBrush="Gray" Padding="10,5">
                        <TextBlock Text="{Binding Name}"/>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Margin="5,10" Content="Add" Command="{Binding AddCommand}" Width="70"/>
            <Button Margin="5,10" Content="Delete" Command="{Binding DeleteCommand}" Width="70"/>
        </StackPanel>
    </Grid>
</UserControl>
...