1

簡単に言われ、おそらく簡単に行われたが、現時点では私のためではない何かを解決するためにあなたの助けを求めます. 私が開発しているのは、FluidUI コントロール セットを使用した Office 2013 のようなアプリケーションです。リボンに [ビュー] タブがあり、ビューを切り替えるボタンがある Word/Access からビュー スイッチャーを実現したい。ViewModel のプロパティ CurrentView 内に View オブジェクト全体を保存するのは間違っていると思い、このアプリケーションを MVVM としてできるだけ純粋なものにしようとしています。このアプリケーションは、私がまだ WPF を学習しているため、「MVVM を使用してアプリを作成する方法」に似ています。Ok。したがって、Fluid Ribbon を備えたウィンドウ (正しい場合は MainWindowModern) があります。ビューを切り替えるための 3 つのボタンがあります (私はそれらをエディターと呼んでいます)。彼らがすることは、MainWindowModern の ViewModel を変更することです。■ CurrentView プロパティを取得し、新しい列挙値をそれに設定します。新しい列挙値を設定するこの部分は完了し、機能します。今。ウィンドウの本体は単なる ContentControl です。ここで、DataContext.CurrentView プロパティ値に基づいて、この ContentControl の Content プロパティを変更したいと考えています。前に言ったように。ビューの c# (私はこのアプリを C# で書いています) ファイル内で分離コードを実行したくありません。機能しない唯一のことは、ContentControl Content プロパティを変更することです。DataTemplates と DataTemplate.Triggers を使用してこれを実行しようとしています ビューの c# (私はこのアプリを C# で書いています) ファイル内でコード ビハインドを実行したくありません。機能しない唯一のことは、ContentControl Content プロパティを変更することです。DataTemplates と DataTemplate.Triggers を使用してこれを実行しようとしています ビューの c# (私はこのアプリを C# で書いています) ファイル内でコード ビハインドを実行したくありません。機能しない唯一のことは、ContentControl Content プロパティを変更することです。DataTemplates と DataTemplate.Triggers を使用してこれを実行しようとしています

これが私がこれまでに得たものです(無関係なコードはありません)。

ウィンドウの XAML

<Fluent:MetroWindow
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Fluent="clr-namespace:Fluent;assembly=Fluent"
    xmlns:localVM="clr-namespace:MVVMTest.ViewModels"
    xmlns:local="clr-namespace:MVVMTest"
    x:Class="MVVMTest.Views.MainWindowModern"
    x:Name="ThisWindow"
    Title="Dialogue Editor (Modern UI Version)"
    Width="1280" Height="480"
    RibbonThemeColor="Red" WindowState="Maximized"
    Icon="..\Assets\App\AppIcon_32x32.png">

    <Window.Resources>
        <DataTemplate x:Key="CharactersEditorTemplate">
            <TextBlock Text="Characters Editor Template Body" />
        </DataTemplate>
        <DataTemplate x:Key="ChaptersEditorTemplate">
            <TextBlock Text="Chapters Editor Template Body" />
        </DataTemplate>
        <DataTemplate x:Key="ConversationsEditorTemplate">
            <TextBlock Text="Conversations Editor Template Body" />
        </DataTemplate>
        <DataTemplate x:Key="aaa" DataType="{x:Type ContentControl}" >
            <TextBlock Text="{Binding ElementName=ThisWindow, Path=DataContext.CurrentView}" />
            <DataTemplate.Triggers>
                <!--<DataTrigger Binding="{Binding CurrentView}">
                    <DataTrigger.Value>
                        <localVM:EditorView>CharactersEditor</localVM:EditorView>
                    </DataTrigger.Value>
                    <Setter Property="Content" Value="{StaticResource CharactersEditorTemplate}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding CurrentView}">
                    <DataTrigger.Value>
                        <localVM:EditorView>ChaptersEditor</localVM:EditorView>
                    </DataTrigger.Value>
                    <Setter Property="Content" Value="{StaticResource ChaptersEditorTemplate}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding CurrentView}">
                    <DataTrigger.Value>
                        <localVM:EditorView>ConversationsEditor</localVM:EditorView>
                    </DataTrigger.Value>
                    <Setter Property="Content" Value="{StaticResource ConversationsEditorTemplate}" />
                </DataTrigger>-->

                <DataTrigger Binding="{Binding ElementName=ThisWindow, Path=DataContext.CurrentView}">
                    <DataTrigger.Value>
                        <localVM:EditorView>ChaptersEditor</localVM:EditorView>
                    </DataTrigger.Value>
                    <DataTrigger.Setters>
                        <Setter Property="Content" Value="{StaticResource ChaptersEditorTemplate}" />
                    </DataTrigger.Setters>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </Window.Resources>

    <Window.DataContext>
        <localVM:MainWindowVM />
    </Window.DataContext>

    <DockPanel x:Name="LayoutRoot" LastChildFill="True">
        <Fluent:Ribbon DockPanel.Dock="Top">

            <Fluent:RibbonTabItem Header="VIEW" Fluent:KeyTip.Keys="V" ReduceOrder="ViewsRibbonGroupBox, ViewsRibbonGroupBox, ViewsRibbonGroupBox">

                <Fluent:RibbonGroupBox Name="ViewsRibbonGroupBox" Header="Views">

                    <Fluent:Button Name="CharactersViewButton" 
                                   Header="Characters" 
                                   LargeIcon="..\Assets\Ribbon\View\CharacterEditorIcon_32x32.png"
                                   Icon="..\Assets\Ribbon\View\CharacterEditorIcon_32x32.png"
                                   Command="{Binding SwitchToCharactersEditorCommand}" >
                        <Fluent:Button.ToolTip>
                            <Fluent:ScreenTip
                                Image="..\Assets\Ribbon\View\CharacterEditorIcon_32x32.png"
                                Title="Characters Editor"
                                Text="Changes current view to Characters Editor view.&#x0a;&#x0a;In this view user can:&#x0a;&#x2022; List existing characters&#x0a;&#x2022; Create new characters&#x0a;&#x2022; Edit existing characters&#x0a;&#x2022; Delete existing characters&#x0a;&#x0a;It is also possible to manage character's emotions in this view." />
                        </Fluent:Button.ToolTip>
                    </Fluent:Button>

                    <Fluent:Button Name="ChaptersViewButton" 
                                   Header="Chapters" 
                                   LargeIcon="..\Assets\Ribbon\View\ChapterEditorIcon_32x32.png"
                                   Icon="..\Assets\Ribbon\View\ChapterEditorIcon_32x32.png"
                                   Command="{Binding SwitchToChaptersEditorCommand}" >
                        <Fluent:Button.ToolTip>
                            <Fluent:ScreenTip
                                Image="..\Assets\Ribbon\View\ChapterEditorIcon_32x32.png"
                                Title="Chapters Editor"
                                Text="Changes current view to Chapters Editor view.&#x0a;&#x0a;In this view user can:&#x0a;&#x2022; List existing chapters&#x0a;&#x2022; Create new chapters&#x0a;&#x2022; Edit existing chapters&#x0a;&#x2022; Delete existing chapters&#x0a;&#x0a;It is also possible to manage chapters's missions in this view." />
                        </Fluent:Button.ToolTip>
                    </Fluent:Button>

                    <Fluent:Button Name="ConversationsViewButton" 
                                   Header="Conversations" 
                                   LargeIcon="..\Assets\Ribbon\View\ConversationEditorIcon_32x32.png"
                                   Icon="..\Assets\Ribbon\View\ConversationEditorIcon_32x32.png"
                                   Command="{Binding SwitchToConversationsEditorCommand}" >
                        <Fluent:Button.ToolTip>
                            <Fluent:ScreenTip
                                Image="..\Assets\Ribbon\View\ConversationEditorIcon_32x32.png"
                                Title="Conversations Editor"
                                Text="Changes current view to Conversations Editor view.&#x0a;&#x0a;In this view user can:&#x0a;&#x2022; List existing conversations&#x0a;&#x2022; Create new conversations&#x0a;&#x2022; Edit existing conversations&#x0a;&#x2022; Delete existing conversations&#x0a;&#x0a;It is also possible to manage conversations's statements and statement's stages in this view."
                                DisableReason="Please define at least one chapter with at least one mission in it to enable Conversations Editor.&#x0a;Also it would be helpful to define at least one character with at least one emotion.&#x0a;It is optional action but highly recommended." />
                        </Fluent:Button.ToolTip>
                    </Fluent:Button>

                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>

        </Fluent:Ribbon>

        <ContentControl Name="MainContent" ContentTemplate="{StaticResource aaa}" />

    </DockPanel>
</Fluent:MetroWindow>

ウィンドウの ViewModel と列挙型

using MVVMTest.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MVVMTest.ViewModels {
    public enum EditorView {
        CharactersEditor,
        ChaptersEditor,
        ConversationsEditor
    }

    public class MainWindowVM : ViewModelBase {

        public MainWindowVM() {
            this.init();
        }

        protected void init() {
            this.Characters = new ObservableCollection<CharacterVM>();

            this.initCommands();
            this.initSampleData();
        }

        protected void initSampleData() {
            Character ch1 = new Character() { Name = "Character 1" };
            Emotion e1 = new Emotion() { Name = "Emotion 1" };
            ch1.Emotions.Add(e1);
            CharacterVM ch1vm = new CharacterVM(ch1);
            this.Characters.Add(ch1vm);

            this.CurrentView = EditorView.ConversationsEditor;
        }

        protected void initCommands() {
            this.SwitchToCharactersEditorCommand = new RelayCommand(param => this.SwitchToCharactersEditor(), param => this.CanSwitchToCharactersEditor());
            this.SwitchToChaptersEditorCommand = new RelayCommand(param => this.SwitchToChaptersEditor(), param => this.CanSwitchToChaptersEditor());
            this.SwitchToConversationsEditorCommand = new RelayCommand(param => this.SwitchToConversationsEditor(), param => this.CanSwitchToConversationsEditor());
        }

        public ObservableCollection<CharacterVM> Characters { get; set; }

        protected EditorView _currentView;
        public EditorView CurrentView {
            get { return this._currentView; }
            set {
                if (this._currentView == value) {
                    return;
                }
                this._currentView = value;
                this.OnPropertyChanged("CurrentView");
            }
        }

        #region Commands

        #region View Tab

        #region Switch To Characters Editor
        public RelayCommand SwitchToCharactersEditorCommand { get; private set; }
        protected void SwitchToCharactersEditor() {
            this.CurrentView = EditorView.CharactersEditor;
        }
        protected bool CanSwitchToCharactersEditor() {
            if (this.CurrentView != EditorView.CharactersEditor) {
                return true;
            }
            return false;
        }
        #endregion Switch To Characters Editor

        #region Switch To Chapters Editor
        public RelayCommand SwitchToChaptersEditorCommand { get; private set; }
        protected void SwitchToChaptersEditor() {
            this.CurrentView = EditorView.ChaptersEditor;
        }
        protected bool CanSwitchToChaptersEditor() {
            if (this.CurrentView != EditorView.ChaptersEditor) {
                return true;
            }
            return false;
        }
        #endregion Switch To Chapters Editor

        #region Switch To Conversations Editor
        public RelayCommand SwitchToConversationsEditorCommand { get; private set; }
        protected void SwitchToConversationsEditor() {
            this.CurrentView = EditorView.ConversationsEditor;
        }
        protected bool CanSwitchToConversationsEditor() {
            if (this.CurrentView != EditorView.ConversationsEditor) {
                return true;
            }
            return false;
        }
        #endregion Switch To Conversations Editor

        #endregion View Tab

        #endregion Commands
    }
}

これがすべて完了したら、次のステップは、ModernUI アプリ (または Android スマートフォン) と同じようにビュー スイッチにアニメーションを追加して、古いコンテンツがウィンドウの境界を越えて、新しいコンテンツが反対側から来るようにすることです。それが不可能な場合は、機能するスイッチャーだけで停止します。

4

2 に答える 2

0

幸いなことに、アニメーションの切り替えも含めて、これは実際には非常に簡単です。必要なのは、サブビューをホストする ItemsControl です。ItemsControl を使用すると、DataTemplateSelector を使用できます。したがって、列挙値に基づいて、セレクターが使用するデータテンプレートを決定するために使用できる出力を生成できます。セレクターについて調べてみてください。まだ混乱している場合は、お気軽にお問い合わせください。幸運を。

于 2013-01-04T00:14:56.960 に答える
0

アニメーションの場合は、サブビューをホストするコンテナー コントロールをお勧めします。このリンクをチェックして、かなり堅実な実装を開始してください。

于 2013-01-04T17:40:17.360 に答える