Hi,
How can I set the back ground color of Nodes pro grammatically?
I need to implement the following screen shot.
I tried to add a outside the Node panel then I am getting error. Also I tried to use a Stack panel outside the panel. This time also I am getting error.
How can I achieve the above screen pro grammatically?
Thanks in advance.
Regards
Ranish
Are you showing 8 separate nodes in that screenshot?
Did you want each one to have its own background color? If so, how do you want to control the area beyond the rectangle that should show that background color?
Or did you want there to be two separate objects, each with its own background, and in this case each behind four nodes? If so, one way to implement that is to use Groups. You could have a Group holding the top four Nodes and another Group holding the bottom four Nodes.
Assuming the latter case, your implementation would need an additional data structure in your model for each group, and you would need to either set the nodedata.SubGraphKey property on each node data to refer to the appropriate group data, or you would need to set the groupdata.MemberKeys property to be a collection of node keys.
And your Diagram.GroupTemplate could be a resource something like:
<DataTemplate x:Key="GroupTemplate">
<go:GroupPanel Background="{Binding Path=Data.Color}" />
</DataTemplate>
assuming of course that your group data has a Color property.
Actually the requirement is as follows. We need to display collection of nodes line by line.
We want to display separate back ground color for each line .
I am using following template for node.
<DataTemplate x:Key="EntityDisableTemplate">
<go:NodePanel go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}" HorizontalAlignment="Stretch"
Width="30" Height="30"
go:Node.SelectionAdorned="True" go:Part.Movable="False" go:Part.Selectable="True"
go:Part.SelectionAdornmentTemplate="{StaticResource EntitySelectionTemplate}"
go:Node.LinkableFrom="True" go:Node.LinkableTo="True" go:Part.Deletable="False"
go:Node.LinkableDuplicates="True" go:Node.LinkableSelfNode="True" MouseLeftButtonDown="NodePanel_MouseLeftButtonDown" >
<Path go:NodePanel.Figure="Rectangle" Cursor="Hand"
Fill="Transparent"
StrokeThickness="0"
Stroke="{Binding Path=Part.IsSelected,
Converter={StaticResource theSelectedBrushConverter}}"/>
</go:NodePanel>
</DataTemplate>
How can I attach background of each row?
Regards,
RanishHi
Try this complete sample:
[code]
<UserControl.Resources>
<go:BooleanBrushConverter x:Key=“theBooleanBrushConverter”
TrueBrush=“Magenta” FalseBrush=“Black” />
<local:CoordinatesConverter x:Key=“theCoordinatesConverter” />
<go:DataTemplateDictionary x:Key="DTD">
<DataTemplate x:Key="">
<!-- 30x30 is also hard-coded in the conversions -->
<Grid Width="30" Height="30"
go:Node.Location="{Binding Path=Data.Location, Converter={StaticResource theCoordinatesConverter}}"
Background="{Binding Path=Data.Color}">
<Rectangle HorizontalAlignment="Center" VerticalAlignment="Center"
Width="24" Height="24" Margin="3"
Stroke="{Binding Path=Part.IsSelected, Converter={StaticResource theBooleanBrushConverter}}"
StrokeThickness="1" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
Text="{Binding Path=Data.Key}" FontSize="6" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="Outline">
<Path go:Node.Location="0 0"
Data="{Binding Path=Data.Path}"
Stroke="Red" StrokeThickness="2" />
</DataTemplate>
</go:DataTemplateDictionary>
</UserControl.Resources>
<go:Diagram x:Name=“myDiagram” Padding=“10”
HorizontalContentAlignment=“Stretch” VerticalContentAlignment=“Stretch”
InitialPosition=“0 0”
NodeTemplateDictionary="{StaticResource DTD}"
IsReadOnly=“True”>
</go:Diagram>
[/code]
Along with this code-behind:
[code]/* Copyright © Northwoods Software Corporation, 2008-2011. All Rights Reserved. */
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using Northwoods.GoXam;
using Northwoods.GoXam.Model;
namespace NodeBackground {
public partial class NodeBackground : UserControl {
public NodeBackground() {
InitializeComponent();
var model = new GraphModel<SimpleNodeData, String>();
model.Modifiable = true;
model.NodesSource = new ObservableCollection<SimpleNodeData>() {
new SimpleNodeData() { Key="R23", Location=new Point(1, 1), Color="Pink" },
new SimpleNodeData() { Key="R12", Location=new Point(2, 1), Color="Pink" },
new SimpleNodeData() { Key="G45", Location=new Point(3, 1), Color="LightGreen" },
new SimpleNodeData() { Key="B78", Location=new Point(2, 2), Color="LightBlue" },
new SimpleNodeData() { Key="G56", Location=new Point(3, 2), Color="LightGreen" },
new SimpleNodeData() { Key="group1", Category="Outline", Points=new List<Point>() {
new Point(3, 1), new Point(3, 2), new Point(2, 2), new Point(2, 3), new Point(4, 3), new Point(4, 1)
} },
};
myDiagram.Model = model;
}
}
public class CoordinatesConverter : Converter {
public override object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
if (value is Point) {
Point p = (Point)value;
return new Point(p.X30, p.Y30); //!!! 30 hard-coded
}
return base.Convert(value, targetType, parameter, culture);
}
}
#if !SILVERLIGHT
[Serializable]
#endif
public class SimpleNodeData : GraphModelNodeData {
public String Color {
get { return _Color; }
set { if (_Color != value) { String old = _Color; _Color = value; RaisePropertyChanged(“Color”, old, value); } }
}
private String _Color = “White”;
public List<Point> Points {
get { return _Points; }
set { if (_Points != value) { List<Point> old = _Points; _Points = value; RaisePropertyChanged("Points", old, value); } }
}
private List<Point> _Points = new List<Point>();
public Geometry Path {
get {
PathGeometry geo = new PathGeometry();
PathFigure fig = null;
foreach (Point p in this.Points) {
if (fig == null) {
fig = new PathFigure();
fig.StartPoint = new Point(p.X*30, p.Y*30); //!!! 30 hard-coded
} else {
LineSegment seg = new LineSegment();
seg.Point = new Point(p.X*30, p.Y*30); //!!! 30 hard-coded
fig.Segments.Add(seg);
}
}
fig.IsFilled = false;
fig.IsClosed = true;
geo.Figures.Add(fig);
return geo;
}
}
}
}[/code]
This produces the following screenshot: