Modlr, Gaffr and ECO5

I added a diagram overview to Modlr today:

I did this with ECO and WPF using a ListView like so:

   1: _rhRoot = new ReferenceHandle();

   2: _rhRoot.EcoSpace = es;

   3: _ehDiagrams = new ExpressionHandle();

   4: _ehDiagrams.RootHandle = _rhRoot;

   5: _ehDiagrams.Expression = "AbstractDiagram.allinstances->orderby(presentationName)";

   6: _edp = new EcoObjectDataProvider(_ehDiagrams);

   7:  

   8: ListView.SetBinding(ListView.ItemsSourceProperty, new Binding() { Source = _edp});

In XAML the ListView is defined like this:

   1: <UserControl.Resources>

   2:     <DataTemplate x:Key="OneDiagram">

   3:         <StackPanel>

   4:             <local:ModlrOverviewDiagram></local:ModlrOverviewDiagram>

   5:             <TextBlock Text="{Binding Path=PresentationName}"></TextBlock>

   6:         </StackPanel>

   7:     </DataTemplate>

   8: </UserControl.Resources>

   9: <Grid x:Name="RootGrid" >

  10:     <DockPanel Background="#FFFAFAFA">

  11:         <ListView DockPanel.Dock="Top"  Background="Transparent" x:Name="ListView"  ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemTemplate="{StaticResource OneDiagram}" MouseDoubleClick="ListView_MouseDoubleClick" PreviewKeyDown="ListView_PreviewKeyDown" SelectionMode="Single" BorderThickness="0">

  12:             <ListView.ItemsPanel>

  13:                 <ItemsPanelTemplate>

  14:                     <WrapPanel  Margin="10,10,10,10" ItemWidth="200" ItemHeight="150" />

  15:                 </ItemsPanelTemplate>

  16:             </ListView.ItemsPanel>

  17:         </ListView>

  18:         <Image  DockPanel.Dock="Bottom"  Source="/Eco.Modlr.ModelEditor;component/Diagrams/logo.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Stretch="None"></Image>

  19:     </DockPanel>

  20: </Grid>

 

And as you can see the actual diagram rendering is done by the ModlrOverviewDiagram. And that class looks like this:

 

   1: public class ModlrOverviewDiagram : Grid

   2: {

   3:     public ModlrOverviewDiagram()

   4:     {

   5:         DataContextChanged += new DependencyPropertyChangedEventHandler(ModlrOverviewDiagram_DataContextChanged);

   6:     }

   7:  

   8:     void ModlrOverviewDiagram_DataContextChanged(object sender, DependencyPropertyChangedEventArgs e)

   9:     {

  10:         if (DataContext is IElementProvider)

  11:         {

  12:             AbstractDiagram diag=(DataContext as IElementProvider).Element.GetValue<AbstractDiagram>();

  13:             if (diag != null)

  14:             {

  15:                 ModlrDiagramWPF modlrDiagramWPF = new ModlrDiagramWPF();

  16:                 modlrDiagramWPF.InitForDiagram(diag, GA.Singleton.GetCurrentEcoSpace() as EcoModelLayerSpace_WithDiagrams);

  17:                 modlrDiagramWPF.FixUpForOverviewDisplay(190,120);

  18:                 Border b = new Border();

  19:                 b.BorderThickness = new Thickness(1);

  20:                 b.BorderBrush = new SolidColorBrush(Colors.Gray);

  21:                 b.CornerRadius = new CornerRadius(15);

  22:                 b.Background = new SolidColorBrush(Colors.White);

  23:                 b.Child = modlrDiagramWPF;

  24:                 b.Width = 190;

  25:                 b.Height = 120;

  26:                 Children.Add(b);

  27:             }

  28:         }

  29:     }

  30: }

The real diagram rendering is done in the modlrDiagramWPF.InitForDiagram and this is the exact same method that usually renders a Diagram for Modlr:

I love working with ECO! I love working with WPF! There are no limitations at all…

BTW; I am really happy with the blog tools I use now: Windows Live Writer and the Code Snippet plugin from here (At first I thought that there was something wrong the plugin, but the problem was a setting in blogger that Turned all linefeeds into two br’s !)