Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic display DigramLink in data template of combo box (Read 4008 times)
Chetna Tumme
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 10
Joined: Nov 28th, 2012
display DigramLink in data template of combo box
Nov 28th, 2012 at 7:30am
Print Post  
Hello,

My requirement is that I want to diasplay diagram link along with text related to it. You can find the requirement snapshot in attached file.

I have created a demo project it contains how I have created Data Template fo Silver light control Combobox.

1. I know that if List of DiagramLink is given as Items Source then links are displayed fine.
But I want related text besides the link in combobox.

2. Also I had tried to create a class derived from DiagramLink, added a property in it, and then tried to bind to Combobox. but no success :(.

So Please look into the following Xaml.cs and Xaml files and let me know the solution as soon as possible.... :)

[color=#ffff00]namespace MindFShapes
{
    public partial class ComboBoxWithDiagramLinkDemo : UserControl
    {
        public ComboBoxWithDiagramLinkDemo()
        {
            InitializeComponent();
            Loaded += page_Loaded;
        }

        private void page_Loaded(object sender, RoutedEventArgs e)
        {
            var cmbItemsCollection = new List<ComboItem>();
            var link1 = CreateNewLink("Access");
            cmbItemsCollection.Add(new ComboItem(link1, "Access"));

            var link2 = CreateNewLink("Composition");
            cmbItemsCollection.Add(new ComboItem(link2, "Composition"));

            var link3 = CreateNewLink("Flow");
            cmbItemsCollection.Add(new ComboItem(link3, "Flow"));

            var link4 = CreateNewLink("Aggregation");
            cmbItemsCollection.Add(new ComboItem(link4, "Aggregation"));

            var link5 = CreateNewLink("Assignment");
            cmbItemsCollection.Add(new ComboItem(link5, "Assignment"));

            var link6 = CreateNewLink("Association");
            cmbItemsCollection.Add(new ComboItem(link6, "Association"));

            var link7 = CreateNewLink("Realization");
            cmbItemsCollection.Add(new ComboItem(link7, "Realization"));
            cmbBox.ItemsSource = cmbItemsCollection;

        }


        private DiagramLink CreateNewLink(string relationtype)
        {
            DiagramLink diagramLink = null;
            switch (relationtype)[color=#00ffff]
            {
                case "Access":
                    diagramLink = new DiagramLink();
                    SetLinkStyle(diagramLink, ArrowHeads.None, false, ArrowHeads.Arrow, false, DashStyles.Dot);
                    break;
                case "Composition":
                    diagramLink = new DiagramLink();
                    SetLinkStyle(diagramLink, ArrowHeads.None, false, ArrowHeads.Rhombus, true, DashStyles.Solid);
                    break;
                case "Flow":
                    diagramLink = new DiagramLink();
                    SetLinkStyle(diagramLink, ArrowHeads.None, false, ArrowHeads.Triangle, true, DashStyles.Dash);
                    break;
                case "Aggregation":
                    diagramLink = new DiagramLink();
                    SetLinkStyle(diagramLink, ArrowHeads.None, false, ArrowHeads.Rhombus, false, DashStyles.Solid);
                    break;
                case "Assignment":
                    diagramLink = new DiagramLink();
                    SetLinkStyle(diagramLink, ArrowHeads.Circle, true, ArrowHeads.Circle, true, DashStyles.Solid);
                    break;
                case "Association":
                    diagramLink = new DiagramLink();
                    SetLinkStyle(diagramLink, ArrowHeads.None, false, ArrowHeads.None, false, DashStyles.Solid);
                    break;
                case "Realization":
                    diagramLink = new DiagramLink();
                    SetLinkStyle(diagramLink, ArrowHeads.None, false, ArrowHeads.Triangle, false, DashStyles.Dot);
                    break;

            }

            if (diagramLink != null)
                diagramLink.Tag = relationtype;
            return diagramLink;
        }

        public static void SetLinkStyle(DiagramLink link, Shape startHead, bool isStartShapeFilled, Shape endHead, bool isEndShapeFilled, DashStyle dashStyle)
        {
            link.Pen = new Pen(new SolidColorBrush(Colors.Black), 2.0, dashStyle);
            link.Brush = new SolidColorBrush(Colors.Black);
            link.BaseShape = startHead;
            link.HeadShape = endHead;
            link.StartPoint = new Point(0, 0);
            link.EndPoint = new Point(80, 0);
            link.BaseShapeSize = 8.0;
            link.HeadShapeSize = 8.0;
            link.VerticalAlignment = VerticalAlignment.Stretch;
            link.VerticalContentAlignment = VerticalAlignment.Stretch;
            if (isStartShapeFilled) link.BaseBrush = new SolidColorBrush(Colors.Black);
            else link.BaseBrush = new SolidColorBrush(Colors.White);
            if (isEndShapeFilled) link.HeadBrush = new SolidColorBrush(Colors.Black);
            else link.HeadBrush = new SolidColorBrush(Colors.White);
        }
    }

    public class ComboItem
    {
        public DiagramLink Arrow { get; set; }
        public string ArrowKey { get; set; }

        public ComboItem(DiagramLink arrow, string arrowKey)
        {
            Arrow = arrow;
            ArrowKey = arrowKey;
        }
    }
}[/color]


[color=#ffff00]<Grid x:Name="LayoutRoot" Background="White">
        <ComboBox  x:Name="cmbBox" Width="100" Height="30">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Silverlight:DiagramLink HeadShape="Arrow.HeadShape" BaseShape="Arrow.BaseShape" StartPoint="Arrow.StartPoint"
                         EndPoint ="Arrow.EndPoint" BaseShapeSize="Arrow.BaseShapeSize" HeadShapeSize="Arrow.HeadShapeSize"/>
                        <TextBlock Text="{Binding ArrowKey}"/>
                    </StackPanel>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>[/color]
  

Combobox.docx (Attachment deleted)
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: display DigramLink in data template of combo box
Reply #1 - Nov 28th, 2012 at 9:46am
Print Post  
Hi,

First create a value converter that will be used when binding the DiagramLink instances, due to a bug with the ComboBox control:

Code
Select All
public class DiagramLinkCloneConverter : IValueConverter
{
  #region IValueConverter Members

  public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
    DiagramLink orig = value as DiagramLink;
    DiagramLink link = new DiagramLink();
    ComboBoxWithDiagramLinkDemo.SetLinkStyle(
      link, orig.BaseShape, orig.BaseBrush == Brushes.Black,
      orig.HeadShape, orig.HeadBrush == Brushes.Black,
      new DashStyle(orig.StrokeDashArray, orig.StrokeDashOffset));

    return link;
  }

  public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  {
     throw new NotImplementedException();
  }

  #endregion
} 



Next, in your ComboBoxWithDiagramLinkDemo.xaml file, create an instance of the converter class and assign a key to it:
Code
Select All
<UserControl.Resources>
  <local:DiagramLinkCloneConverter x:Key="diagramKeyCloneConverter" />
</UserControl.Resources> 



Finally, replace the <Silverlight:DiagramLink ... /> element in your ItemTemplate with a ContentPresenter element using the conveter. The DataTemplate will look like this:

Code
Select All
<DataTemplate>
  <StackPanel Orientation="Horizontal">
    <ContentPresenter Content="{Binding Arrow, Converter={StaticResource diagramKeyCloneConverter}}" />
    <TextBlock Text="{Binding ArrowKey}"/>
  </StackPanel>
</DataTemplate> 



I have attached a screenshot with the result these corrections produced in my test.

Regards,
Lyubo
  

combotemplate_result.png (Attachment deleted)
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint