Binding two way

5 posts, 0 answers
  1. Wang
    Wang avatar
    42 posts
    Member since:
    Oct 2011

    Posted 05 Jun Link to this post

    Hello,

    I want to build a module with diagram,

    in this module,I have two custom shape with textbox and button in the shape ContentTemplate.each shape provide 20 ToolboxItem,I want to achieve the goal when I input text to a textbox or click a button in the diagram,I want to get the text of the textbox or the which button was clicked.

    the problem is:

    1.in the diagram, there are 20 textbox/button ToolboxItem, how to binding a  Property to the textbox/button let me know each textbox's text and which button was clicked.

    2.can we binding a DependencyProperty to the textbox or button, and the mode is twoway?

    I have looked the Dashboard simple,but I have no idea about this requirement.

    Here is the pivotal code:

    GenericShapes.xaml:

    <Style TargetType="dashboard:TextBoxShape">
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Width" Value="120" />
            <Setter Property="Height" Value="40" />
            <Setter Property="MaxWidth" Value="400" />
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <telerik:RadWatermarkTextBox MinWidth="90" MaxWidth="400" LostFocus="ChangeValue"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

     

    <Style TargetType="dashboard:ButtonShape">
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Width" Value="120" />
            <Setter Property="Height" Value="40" />
            <Setter Property="MaxWidth" Value="400" />
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Button></Button>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
    </Style>

    ToolboxControl.xaml:

    <local:TextBoxToolboxItem Header="t1" />
    <local:TextBoxToolboxItem Header="t2"  />
    <local:ButtonToolboxItem Header="b1" />
    <local:ButtonToolboxItem Header="b2" />

    ……

  2. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 06 Jun Link to this post

    Hi Wang,

    Could you please elaborate a bit more on the scenario you have as it does not become clear what is the expected outcome. Please take a look at the following topics that will help you start with setting up your toolbox:
    DiagramToolbox
    How to Populate RadDiagramToolbox with Custom Data Items

    Regards,
    Peshito
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Wang
    Wang avatar
    42 posts
    Member since:
    Oct 2011

    Posted 07 Jun in reply to Peshito Link to this post

    Hi Peshito,

    thanks for your reply! I already have a solution about that question, but now I have a new problem when using Diagram:

    In my project,I program every module to a DLL,in each DLL, I set some usercontrol in it,when I access a module, use a window to load the DLL like this:

    contentwindow.xaml:

    <Grid>
            <ContentControl x:Name="MainContent" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
    </Grid>

    contentwindow.xaml.cs:

     Assembly assembly = Assembly.LoadFrom(Directory.GetCurrentDirectory() + "\\Modules\\" + module.Path);

    //get the assembly of usercontrol
    Type type = assembly.GetType(module.DefaultView);

    MainContent.Content  = Activator.CreateInstance(type);

     

    the problem is:when I Drag a custorm shape to the diagram, the diagram can not show it,but the regular shape in toolbox can be shown right.

    I'm sure it's the problem when using  dynamic load in my project,because I write the same code in a window not in a usercontrol, it worked right.

    here is the main code in my module:

    Diagram.xaml:

    <UserControl x:Class="Test.Modules.Views.Diagram"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 xmlns:local="clr-namespace:Test.Modules.Views"
                 xmlns:customDiagram="clr-namespace:Test.Modules.CustomDiagram"
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                 mc:Ignorable="d" 
                 d:DesignHeight="300" d:DesignWidth="300">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <telerik:RadDiagramToolbox x:Name="toolBox"
                              Title="Gallery"
                              Grid.Column="1"
                              Margin="5 0 0 0"
                              Header="ToolBox" />
            <customDiagram:ExtendedDiagram x:Name="diagram">

            </customDiagram:ExtendedDiagram>
        </Grid>
    </UserControl>

    Diagram.xaml.cs:

    public partial class Diagram : UserControl
        {
            public Diagram()
            {
                InitializeComponent();
                var galleryItems = new HierarchicalGalleryItemsCollection();

                var customItemsGallery = new Gallery() { Header = "my shape" };

                var listBox = new ListBox();
                listBox.Items.Add(new ListBoxItem() { Content = "Item 1" });
                listBox.Items.Add(new ListBoxItem() { Content = "Item 2" });

                var galleryItem = new GalleryItem()
                {
                    Header = "text box",
                    Shape = new TextBoxShape()
                };

                customItemsGallery.Items.Add(galleryItem);
                galleryItems.Add(customItemsGallery);


                this.toolBox.ItemsSource = galleryItems;
                this.toolBox.SelectedItem = customItemsGallery;
            }
        }

     

    ExtendedDiagram.cs:

    public class ExtendedDiagram : RadDiagram
        {
            protected override bool IsItemItsOwnShapeContainerOverride(object item)
            {
                return (item is TextBoxShape || item is RadDiagramShape);
            }

            protected override Telerik.Windows.Diagrams.Core.IShape GetShapeContainerForItemOverride(object item)
            {
                if (item is TextBoxShape)
                {
                    return new TextBoxShape();
                }
                return new RadDiagramShape();
            }
        }

     

    TextBoxShape.cs:

    public class TextBoxShape : RadDiagramShape
        {

        }

     

    when the Diagram.xaml is a window not usercontrol loaded by another window,it will work right.

    waiting the solution, thank you very much,best wishes!

  5. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 08 Jun Link to this post

    Hi Wang,

    This is most likely caused by the fact that the style you have set for the custom shape is not merged in the application's resources. You should do this first as shown below for instance:
    <Application.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="/WpfApplication1;component/CustomShapeStyle.xaml" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Application.Resources>
    Please find attached a sample project using the code you have share demonstrating the above approach.

    Hope this helps.

    Regards,
    Peshito
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Wang
    Wang avatar
    42 posts
    Member since:
    Oct 2011

    Posted 10 Jun Link to this post

    Hi Peshito,

    thank you very much,by your method,it worked fine.

Back to Top
UI for WPF is Visual Studio 2017 Ready