MVVM, ViewModelLocator, динамически показать вид с ViewModel на основе свойства

Question

У меня вопрос дизайна. Посмотрите на прикрепленное изображение, чтобы получить представление о дизайне приложения. Basicaly Мне просто нужна помощь в поиске правильного подхода.

У меня есть View и ViewModel, который содержит TileUserControl. Он берет коллекцию плиток и отображает их в определенном размере, цвете, порядке и так далее. Он также способен группировать рассказы в группах и позволяет пользователю добавлять и удалять Плитки.

The Tile object выглядит следующим образом.

public class Tile 
    { 
     public int ID { get; set; } 
     public string View { get; set; } 
     public List<string> Views { get; set; } 
     public string TileSize { get; set; } 

    } 

Пока все хорошо. Все работает нормально.

Все плитки имеют контент. Я хочу установить содержимое в View и ViewModel, соответствующие строке View на объекте Tile.

Я использую MVVM Light, но также могу использовать Caliburn Mico. Плитка Control - это DevExpress TileLayoutControl для WPF.

DevExpress TileLayoutControl doc

EDIT: Обновленный С MainTilesView XAML

<Grid> 

     <dxlc:TileLayoutControl Padding="60,41,0,0" 
           ItemsSource="{Binding Tiles}" 
           ScrollBars="None" 
           ScrollViewer.VerticalScrollBarVisibility="Hidden" 
           AllowGroupHeaderEditing="False" 
           AllowMaximizedElementMoving="True" Background="{x:Null}"> 

      <dxlc:TileLayoutControl.GroupHeaderStyle> 
       <Style TargetType="dxlc:TileGroupHeader"> 
        <Setter Property="Foreground" Value="White"/> 
        <Setter Property="FontSize" Value="24"/> 
        <Setter Property="FontFamily" Value="Segeo UI"/> 
        <Setter Property="FontWeight" Value="Light"/> 
       </Style> 
      </dxlc:TileLayoutControl.GroupHeaderStyle> 

      <dxlc:TileLayoutControl.ItemTemplate> 
       <DataTemplate> 
        <dxlc:Tile Header="{Binding Header}" 
           Size="{Binding TileSize}" 
           dxlc:TileLayoutControl.GroupHeader="{Binding GroupHeader}" 
           Tag="{Binding ID}" 
           dxlc:FlowLayoutControl.IsFlowBreak="{Binding IsNewGroup}" 
           Background="{Binding BackgroundColor}"> 
        </dxlc:Tile> 
       </DataTemplate> 
      </dxlc:TileLayoutControl.ItemTemplate> 

      <dxlc:TileLayoutControl.Resources> 
       <conv:IsUserControlConverter x:Key="IsUserControlConverter"/> 
       <conv:StringToTileConverter x:Key="StringToTileConverter"/> 
       <Style TargetType="{x:Type dxlc:Tile}"> 
        <Style.Triggers> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="ExtraSmall"> 
          <Setter Property="Size" Value="ExtraSmall"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="1x1"> 
          <Setter Property="Size" Value="ExtraSmall"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="1x1"> 
          <Setter Property="Size" Value="Small"/> 
          <Setter Property="Width" Value="150"/> 
          <Setter Property="Height" Value="150"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="1x2"> 
          <Setter Property="Size" Value="Large"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="2x1"> 
          <Setter Property="Size" Value="ExtraLarge"/> 
          <Setter Property="Width" Value="150"/> 
          <Setter Property="Height" Value="310"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="2x2"> 
          <Setter Property="Size" Value="ExtraLarge"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="2x3"> 
          <Setter Property="Size" Value="ExtraLarge"/> 
          <Setter Property="Width" Value="310"/> 
          <Setter Property="Height" Value="470"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="3x2"> 
          <Setter Property="Size" Value="ExtraLarge"/> 
          <Setter Property="Width" Value="470"/> 
          <Setter Property="Height" Value="310"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="3x3"> 
          <Setter Property="Size" Value="ExtraLarge"/> 
          <Setter Property="Width" Value="470"/> 
          <Setter Property="Height" Value="470"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="4x2"> 
          <Setter Property="Size" Value="ExtraLarge"/> 
          <Setter Property="Width" Value="630"/> 
          <Setter Property="Height" Value="310"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="4x3"> 
          <Setter Property="Size" Value="ExtraLarge"/> 
          <Setter Property="Width" Value="630"/> 
          <Setter Property="Height" Value="470"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="4x4"> 
          <Setter Property="Size" Value="ExtraLarge"/> 
          <Setter Property="Width" Value="630"/> 
          <Setter Property="Height" Value="630"/> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=TileSize}" Value="Single_1x1"> 
          <Setter Property="Size" Value="Large"/> 
          <Setter Property="Width" Value="150"/> 
          <Setter Property="Height" Value="150"/> 
         </DataTrigger> 



         <DataTrigger Binding="{Binding Path=View,Converter={StaticResource IsUserControlConverter}}" Value="true"> 
          <Setter Property="ContentTemplate"> 
           <Setter.Value> 
            <DataTemplate> 
             <ContentControl cal:View.Model="{Binding Path=View, Converter={StaticResource StringToTileConverter}, UpdateSourceTrigger=Explicit}"/>           
            </DataTemplate> 
           </Setter.Value> 
          </Setter> 
         </DataTrigger> 

        </Style.Triggers> 
       </Style> 
      </dxlc:TileLayoutControl.Resources> 

     </dxlc:TileLayoutControl> 
    </Grid> 

Моя проблема заключается в том, как получить UserControl от Tile.View загруженного в содержание плитки. У меня есть tride выше с DataTrigger и DataTemplate.

StringToTileConverter просто возвращает имя ViewModel.

В настоящее время используется Caliburn Micro, и мои привязки отлично работают за пределами шаблона, но я не могу заставить их работать с DataTemplate.

Также этот код не очень чистый, поэтому я спрашиваю, есть ли у кого более чистый способ сделать это.

Answer 1

При использовании Caliburn.Micro вы можете воспользоваться его встроенным ViewLocator. Вам не нужно конвертеры или DataTriggers, как вы можете определить DataTemplate следующим образом:

<DataTemplate> 
    <ContentControl Width="100" Height="100" cal:View.Model="{Binding}" /> 
    </DataTemplate> 

Вы можете найти это полезным: Binding ListBox to a collection of screens (widgets)

Позвольте мне знать, если вам нужно больше в течение, например.