1
Vote

Reusing Showcase example

description

Hi,
I want to use the Themegraph you have done as part of the showcase example. I want to use it in  winform application. but all I have managed to get is a zoom control without the nodes in the form.
I have used the exact same code, the only difference is that i have made it a WPF usercontrol instead.
In your show case example, you have arranged different types of graph in tabs, but I have just reused the tab item 2 xaml code in my WPF user control as follows:
<UserControl x:Class="GraphXThemed.GraphXWPFUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:graphxctrl="clr-namespace:GraphX.Controls;assembly=GraphX.WPF.Controls"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:GraphXThemed"  
             SnapsToDevicePixels="True"
             mc:Ignorable="d" 
             d:DesignHeight="300" Width="552.239">
        <Grid Margin="0,0,-130,-143">
        <!--<Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>-->
            
        <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="142.851"/>
            <ColumnDefinition Width="22.149"/>
        </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.Resources>
                <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="Templates/ThemedGraphXTemplates.xaml"/>
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
            </Grid.Resources>

            <Border CornerRadius="6" BorderBrush="Black" Background="White" Margin="3" BorderThickness="2">
                <TextBlock Margin="3" TextWrapping="Wrap" TextAlignment="Center" Text="This graph is designed for templating, animation and visual behaviours preview. See vertex and edge tooltips, templated highlights and animations."/>
            </Border>

            
            <graphxctrl:ZoomControl  x:Name="tg_zoomctrl" Grid.Row="1">
                <local:GraphArea_Custom x:Name="tg_Area">
                <local:GraphArea_Custom.Resources>
                        <ResourceDictionary>
                            <ResourceDictionary.MergedDictionaries>
                                <ResourceDictionary Source="Templates/ThemedGraphXTemplates.xaml"/>
                            </ResourceDictionary.MergedDictionaries>
                        </ResourceDictionary>
                    </local:GraphArea_Custom.Resources>
                </local:GraphArea_Custom>
            </graphxctrl:ZoomControl>
            <Border Name="tg_loader" Visibility="Collapsed" CornerRadius="4" BorderBrush="Black" BorderThickness="3" HorizontalAlignment="Center" VerticalAlignment="Center"
                                Background="White" Grid.Row="1" Margin="194,118,193,118">
                <Label VerticalAlignment="Center" Content="Async loading graph..." Margin="10"/>
            </Border>

            <DockPanel LastChildFill="False" Margin="514,3,0,10" Grid.RowSpan="2" Grid.ColumnSpan="3">
                <StackPanel Orientation="Horizontal" DockPanel.Dock="Top" HorizontalAlignment="Center">
                    <Button Height="50" Margin="3" Name="tg_but_randomgraph" Click="tg_but_randomgraph_Click" DockPanel.Dock="Top" UseLayoutRounding="True">
                        <Image Source="Images/dice.png"/>
                    </Button>
                    <Button Height="50" Margin="3" Name="tg_but_relayout"  DockPanel.Dock="Top" UseLayoutRounding="True">
                        <Image Source="Images/update.png"/>
                    </Button>
                </StackPanel>
                <GroupBox Header="Edge options" DockPanel.Dock="Top">
                    <DockPanel LastChildFill="False">
                        <TextBlock DockPanel.Dock="Top" Text="Edge display mode" HorizontalAlignment="Center"/>
                        <ComboBox x:Name="tg_edgeMode"  Margin="3" SelectionChanged="tg_edgeMode_SelectionChanged" DockPanel.Dock="Top" IsReadOnly="True"/>
                        <TextBlock DockPanel.Dock="Top" Text="Edge display type" HorizontalAlignment="Center"/>
                        <ComboBox x:Name="tg_edgeType"  Margin="3" SelectionChanged="tg_edgeType_SelectionChanged" DockPanel.Dock="Top" IsReadOnly="True"/>
                    </DockPanel>
                </GroupBox>
                <GroupBox Header="Behaviours" DockPanel.Dock="Top">
                    <DockPanel LastChildFill="False">
                        <CheckBox Name="tg_dragEnabled" Content="Vertex drag enabled" Margin="3" DockPanel.Dock="Top" Checked="tg_dragEnabled_Checked" Unchecked="tg_dragEnabled_Checked"/>
                        <CheckBox Name="tg_dragMoveEdges" Content="Update edges on move" Margin="3" DockPanel.Dock="Top"/>
                    </DockPanel>
                </GroupBox>
                <GroupBox Header="Highlighting" DockPanel.Dock="Top">
                    <DockPanel LastChildFill="False">
                        <CheckBox Name="tg_highlightEnabled" Content="Is feature enabled" Margin="3" DockPanel.Dock="Top" Checked="tg_highlightEnabled_Checked" Unchecked="tg_highlightEnabled_Checked"/>
                        <TextBlock DockPanel.Dock="Top" Text="Affected control type" HorizontalAlignment="Center"/>
                        <ComboBox x:Name="tg_highlightType"  Margin="3" SelectionChanged="tg_highlightType_SelectionChanged" DockPanel.Dock="Top" IsReadOnly="True"/>
                        <TextBlock DockPanel.Dock="Top" Text="Strategy" HorizontalAlignment="Center"/>
                        <ComboBox x:Name="tg_highlightStrategy"  Margin="3" SelectionChanged="tg_highlightStrategy_SelectionChanged" DockPanel.Dock="Top" IsReadOnly="True"/>
                        <TextBlock DockPanel.Dock="Top" Text="Edge directions" HorizontalAlignment="Center"/>
                        <ComboBox x:Name="tg_highlightEdgeType"  Margin="3" SelectionChanged="tg_highlightEdgeType_SelectionChanged" DockPanel.Dock="Top" IsReadOnly="True"/>
                    </DockPanel>
                </GroupBox>
                <GroupBox Header="Animation" DockPanel.Dock="Top" Height="13">
                    <DockPanel LastChildFill="False">
                        <TextBlock DockPanel.Dock="Top" Text="Move animation" HorizontalAlignment="Center"/>
                        <ComboBox x:Name="tg_moveAnimation"  Margin="3" SelectionChanged="tg_moveAnimation_SelectionChanged" DockPanel.Dock="Top" IsReadOnly="True"/>
                        <TextBlock DockPanel.Dock="Top" Text="Delete animation" HorizontalAlignment="Center"/>
                        <ComboBox x:Name="tg_deleteAnimation"  Margin="3" SelectionChanged="tg_deleteAnimation_SelectionChanged" DockPanel.Dock="Top" IsReadOnly="True"/>
                        <TextBlock DockPanel.Dock="Top" Text="MouseOver animation" HorizontalAlignment="Center"/>
                        <ComboBox x:Name="tg_mouseoverAnimation"  Margin="3" SelectionChanged="tg_mouseoverAnimation_SelectionChanged" DockPanel.Dock="Top" IsReadOnly="True"/>
                    </DockPanel>
                </GroupBox>
            </DockPanel>
        </Grid>
</UserControl>
The contructor of the user control looks as follows
        public GraphXWPFUserControl()
        {
            DataContext = this;
            InitializeComponent();
            ThemedGraph_Constructor();

            DataSource = GenerateData(datasourceSize);
        }
I have added the graphControl onto the form in the following Manner
  graphControl = new GraphXWPFUserControl();

 elementHost1.Child = graphControl;
I have attached an image of the output I get (which is an empty graph). Can you please suggest where I might be going wrong?

file attachments

comments