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" />
……
4 Answers, 1 is accepted
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
Rank 1
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!
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>Hope this helps.
Regards,
Peshito
Telerik
Rank 1
Hi Peshito,
thank you very much,by your method,it worked fine.