How to add a path inside of a border using c# and wpf

[moondaddy]

I'm posting code for a user control ( FunctionConnectorSelector) below which
has 3 content controls in it. each content control uses a style from a
resource dictionary merged into the app.xaml file. each control has a
border with another style, and each border has a unique path inside of it.

I need to dynamically add these content controls using c# at runtime and am
having trouble referencing the styles and adding the path into the border.
this is the suto code I want to use

ContentControl cc = new ContentControl();
cc.style = "HorizontalLineConnectorButton";
Border bdr = new Border();
dbr.style = "FunctionConnectorSelectorButtonStyle";

cc.content = dbr;
//add first polyline
PathGeometry geometry = new PathGeometry();
PathFigure figure = new PathFigure();
figure.StartPoint = linePoints[0];
linePoints.Remove(linePoints[0]);
figure.Segments.Add(new PolyLineSegment(linePoints, false)); // or true
geometry.Figures.Add(figure);
// add second polyline
figure = new PathFigure();
figure.StartPoint = linePoints2[0];
linePoints.Remove(linePoints2[0]);
figure.Segments.Add(new PolyLineSegment(linePoints2, false)); // or true
geometry.Figures.Add(figure);

// or add path data something like this:
//path.Data="M0,2 L3,2 L3,6 L0,6 M3,4 L6,4 M9,2 L6,2 L6,6 L9,6"


dbr.content = geometry;


Below is the xaml for what I'm trying to do with c#. Note, I will start
with the user control "FunctionConnectorSelector" and add everything else
with c#.


<Canvas x:Class="DiagramTools.Connectors.FunctionConnectorSelector"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:c="clr-namespaceiagramTools.Connectors"
mc:Ignorable="d"
designWidth="11" designHeight="33.512"
Height="60" Width="30" Background="Transparent">

<!-- Single Line Connection-->
<ContentControl Name="btnLine" Width="11" Height="10" Canvas.Left="12"
Canvas.Top="13" Visibility="Hidden" >
<Border Style="{DynamicResource
FunctionConnectorSelectorButtonStyle}">
<Path Stroke="#FF007182" StrokeThickness="1" Data="M2,4 L7,4" />
</Border>
</ContentControl>

<!-- One to Many Connection-->
<ContentControl Name="btnOtM" Width="11" Height="10" Canvas.Left="12"
Canvas.Top="25" Visibility="Hidden" >
<Border Style="{DynamicResource
FunctionConnectorSelectorButtonStyle}" >
<Path Stroke="#FF007182" StrokeThickness="1" Data="M2,2 L5,2
L5,6 L2,6 M5,4 L8,4" />
</Border>
</ContentControl>

<!-- Many to Many Connection-->
<ContentControl Name="btnMtM" Width="11" Height="10" Canvas.Left="12"
Canvas.Top="37" Visibility="Hidden" >
<Border Style="{DynamicResource
FunctionConnectorSelectorButtonStyle}">
<Path Stroke="#FF007182" StrokeThickness="1" Data="M0,2 L3,2
L3,6 L0,6 M3,4 L6,4 M9,2 L6,2 L6,6 L9,6" />
</Border>
</ContentControl>

</Canvas>

any recomendations and sample code would be awsome. thanks.

 

[Linda Liu[MSFT]]

Hi Moondaddy,

I need to dynamically add these content controls using c# at runtime and

am having trouble referencing the styles and adding the path into the
border.

To retrieve resources in code, call the FrameworkElement.FindResource or
TryFindResource method.

The following is a sample to add the ContentControl named "btnOtM" to the
Canvas in code. It requires to set the Name attribute in the Canvas element
to "Canvas1" in your sample XAML snippet.

private void Window_Loaded(object sender, RoutedEventArgs e)
{
// build a ContentControl
ContentControl cc = new ContentControl();
cc.Name = "btnOtM";
cc.Width = 11;
cc.Height = 10;
Canvas.SetLeft(cc, 12);
Canvas.SetTop(cc, 25);

// build a Border
Border b = new Border();
b.Style =
TryFindResource("FunctionConnectorSelectorButtonStyle") as Style;


// build a PathGeometry
Path p = new Path();
p.Stroke = new
SolidColorBrush(Color.FromArgb(0xFF,0,0x71,0x82));
p.StrokeThickness = 1;
PathGeometry pg = new PathGeometry();
PathFigure pf = new PathFigure();
pf.StartPoint = new Point(2, 2);
pf.Segments.Add(new LineSegment(new Point(5, 2),true));
pf.Segments.Add(new LineSegment(new Point(5, 6), true));
pf.Segments.Add(new LineSegment(new Point(2, 6), true));
pg.Figures.Add(pf);

pf = new PathFigure();
pf.StartPoint = new Point(5, 4);
pf.Segments.Add(new LineSegment(new Point(8, 4), true));
pg.Figures.Add(pf);
p.Data = pg;

b.Child = p;
cc.Content = b;
this.Canvas1.Children.Add(cc);
}

Hope this helps.
If you have any question, please feel free to let me know.

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

 

[moondaddy]

Great Thanks Linda!! thats perfect.

Hi Moondaddy,

am having trouble referencing the styles and adding the path into the
border.

To retrieve resources in code, call the FrameworkElement.FindResource or
TryFindResource method.

The following is a sample to add the ContentControl named "btnOtM" to the
Canvas in code. It requires to set the Name attribute in the Canvas
element
to "Canvas1" in your sample XAML snippet.

private void Window_Loaded(object sender, RoutedEventArgs e)
{
// build a ContentControl
ContentControl cc = new ContentControl();
cc.Name = "btnOtM";
cc.Width = 11;
cc.Height = 10;
Canvas.SetLeft(cc, 12);
Canvas.SetTop(cc, 25);

// build a Border
Border b = new Border();
b.Style =
TryFindResource("FunctionConnectorSelectorButtonStyle") as Style;


// build a PathGeometry
Path p = new Path();
p.Stroke = new
SolidColorBrush(Color.FromArgb(0xFF,0,0x71,0x82));
p.StrokeThickness = 1;
PathGeometry pg = new PathGeometry();
PathFigure pf = new PathFigure();
pf.StartPoint = new Point(2, 2);
pf.Segments.Add(new LineSegment(new Point(5, 2),true));
pf.Segments.Add(new LineSegment(new Point(5, 6), true));
pf.Segments.Add(new LineSegment(new Point(2, 6), true));
pg.Figures.Add(pf);

pf = new PathFigure();
pf.StartPoint = new Point(5, 4);
pf.Segments.Add(new LineSegment(new Point(8, 4), true));
pg.Figures.Add(pf);
p.Data = pg;

b.Child = p;
cc.Content = b;
this.Canvas1.Children.Add(cc);
}

Hope this helps.
If you have any question, please feel free to let me know.

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no
rights.

 

[moondaddy]

This was a big help as it shows me how to set different styles from
resources in c#. Now I need to change a control template in c#. Is this
possible? If so, then here's a control template applied in xaml:

<ContentControl x:Name="ConnectorGraph" Template="{DynamicResource
ShapeConnectorTemplate}" RenderTransformOrigin="0.5,0.5"
HorizontalAlignment="Right" VerticalAlignment="Center" Width="7"
Height="12" >


and I want to be able to change the template to xyzTemplate using c#.

If this is not allowed, then here's my problem. I have a content control
called "ShapeConnector" which uses a template to create a path in side of
it, and a gradient fill inside that path. The data trigger changes the
color of the fill when the IsMouseOver property changes. this is good.
however, when I'm doing a drag operation the IsMouseOver property doesn't
fire. So I need to manually change the gradient fill in the path. I was
going to do this from a HitTest method in the drag operation and when the
HitTest finds the ShapeConnector content control, I would then change the
fill color there.

One option might be to have a style for the gradient in the path, but I
don't know how to reference a style inside a template using c#. Here's the
xaml for the template:

<ControlTemplate x:Key="ShapeConnectorTemplate" TargetType="{x:Type
ContentControl}" >
<Path x:Name="MyPath" Style="{DynamicResource ConnectorPathStyle}"
RenderTransformOrigin="0.5,0.5" Height="12" Width="7" >
<Path.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0.181,0.5">
<GradientStop Color="#FF82D7EE" Offset="1"/>
<GradientStop Color="#FFFBFFFF" Offset="0.237"/>
</LinearGradientBrush>
</Path.Fill>
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="0,0" IsClosed="True">
<BezierSegment Point1="8,6" Point2="8,6"
Point3="0,12"/>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
<ControlTemplate.Triggers>

<DataTrigger Value="True">
<DataTrigger.Binding>
<Binding Path="IsMouseOver">
<Binding.RelativeSource>
<RelativeSource Mode="FindAncestor"
AncestorType="{x:Type FrameworkElement}" AncestorLevel="1"/>
</Binding.RelativeSource>
</Binding>
</DataTrigger.Binding>
<Setter Property="Fill" TargetName="MyPath">
<Setter.Value>
<LinearGradientBrush EndPoint="1,0.5"
StartPoint="0.181,0.5">
<GradientStop Color="#FFF7B030" Offset="0.835"/>
<GradientStop Color="#FFFFFDF6" Offset="0.058"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>


I'm thinking I wound need to chang the stype for "MyPath" in this line:

x:Name="MyPath" Style="{DynamicResource ConnectorPathStyle}"

but using c#.

What do you recomend?

 

[moondaddy]

I thought I found a solution but it doesn't have any effect on the
appearance of the path. I got a reference to the path using
VisualTreeHelper.GetChild method and then set a style on the path, but it
didn't change the appearance. Here's the c#:

System.Windows.Shapes.Path path =
(System.Windows.Shapes.Path)VisualTreeHelper.GetChild(foundTargetConnector.ConnectorGraph,
0);
Console.WriteLine(path.ToString());
path.Style = TryFindResource("ConnectorPathMouseOverStyle") as Style;

Here's the content of the user control that has the path I'm trying to
change:

<Grid x:Name="ConnectorGrid" Background="Transparent"
Style="{DynamicResource FunctionConnectorGridLeftStyle}" Width="20"
Height="12" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="13"/>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>


<ContentControl x:Name="ConnectorGraph" Template="{DynamicResource
ShapeConnectorTemplate}" RenderTransformOrigin="0.5,0.5"
HorizontalAlignment="Right"
VerticalAlignment="Center" Width="7" Height="12" >
<ContentControl.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</ContentControl.RenderTransform>
</ContentControl>
</Grid>


and here's the 2 styles I want to use to change the appearance of the path
in the control template:

<Style x:Key="ConnectorPathStyle" TargetType="{x:Type Path}">
<Setter Property="Stroke" Value="#FF24BFE2"/>
<Setter Property="StrokeThickness" Value="0.5"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="1,0.5"
StartPoint="0.181,0.5">
<GradientStop Color="#FF82D7EE" Offset="1"/>
<GradientStop Color="#FFFBFFFF" Offset="0.237"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>

<Style x:Key="ConnectorPathMouseOverStyle" TargetType="{x:Type Path}">
<Setter Property="Stroke" Value="#FF24BFE2"/>
<Setter Property="StrokeThickness" Value="0.5"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="1,0.5"
StartPoint="0.181,0.5">
<GradientStop Color="#FFF7B030" Offset="0.835"/>
<GradientStop Color="#FFFFFDF6" Offset="0.058"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>

and here's the control template


<ControlTemplate x:Key="ShapeConnectorTemplate" TargetType="{x:Type
ContentControl}" >
<Path x:Name="MyPath" Style="{DynamicResource ConnectorPathStyle}"
RenderTransformOrigin="0.5,0.5" Height="12" Width="7" >
<Path.Fill>
<LinearGradientBrush EndPoint="1,0.5"
StartPoint="0.181,0.5">
<GradientStop Color="#FF82D7EE" Offset="1"/>
<GradientStop Color="#FFFBFFFF" Offset="0.237"/>
</LinearGradientBrush>
</Path.Fill>
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="0,0" IsClosed="True">
<BezierSegment Point1="8,6" Point2="8,6"
Point3="0,12"/>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
<ControlTemplate.Triggers>

<DataTrigger Value="True">
<DataTrigger.Binding>
<Binding Path="IsMouseOver">
<Binding.RelativeSource>
<RelativeSource Mode="FindAncestor"
AncestorType="{x:Type FrameworkElement}" AncestorLevel="1"/>
</Binding.RelativeSource>
</Binding>
</DataTrigger.Binding>
<Setter Property="Fill" TargetName="MyPath">
<Setter.Value>
<LinearGradientBrush EndPoint="1,0.5"
StartPoint="0.181,0.5">
<GradientStop Color="#FFF7B030" Offset="0.835"/>
<GradientStop Color="#FFFFFDF6" Offset="0.058"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>

any advice would be great.

Thanks.

 

[Linda Liu[MSFT]]

Hi George,

Thank you for your reply!

The way you get the reference to the path is correct. But you shouldn't
change the appearance of the path by changing the path's style, because the
Fill property of the path is explicitly set in the control template which
will override the value of the Fill property set in the style. Instead, you
should change the Fill property of the path directly to change the path's
appearance in this case.

The following is a sample:
// get the reference to the path
System.Windows.Shapes.Path path =
(System.Windows.Shapes.Path)VisualTreeHelper.GetChild(foundTargetConnector.C
onnectorGraph, 0);

// change the Fill property of the path directly
LinearGradientBrush brush = new LinearGradientBrush();
brush.EndPoint = new Point(1, 0.5);
brush.StartPoint = new Point(0.181, 0.5);
brush.GradientStops.Add(new GradientStop(Color.FromArgb(0xFF, 0xF7, 0xB0,
0x30), 0.835));
brush.GradientStops.Add(new GradientStop(Color.FromArgb(0xFF, 0xFF, 0xFD,
0xF6), 0.058));

path.Fill =brush;

BTW, an alternative way to get the reference to the path in this practice
is to get the control template first and then call the FindName method of
the ControlTemplate class to get the object in question. The following is a
sample:

ControlTemplate template = foundTargetConnector.ConnectorGraph.Template;
Path path = tempalte.FindName("MyPath",
foundTargetConnector.ConnectorGraph) as Path;

Hope this helps.
If you have any question, please feel free to let me know.

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[moondaddy]

Thanks Linda,

This was very helpful and put me in the right direction. ultimately what I
need to do is set the path fill from a brush stored in a global dictionary
and I was attempting to do that by using a style which as you explained will
not work. I took your example and created a brush in a global dictionary
and then applied that brush. This works perfect. here's the final code
that's working for me:

<!-- code in the global dictionary -->
<LinearGradientBrush x:Key="ConnecotrMouseOverBrush" EndPoint="1,0.5"
StartPoint="0.181,0.5">
<GradientStop Color="#FFF7B030" Offset="0.835"/>
<GradientStop Color="#FFFFFDF6" Offset="0.058"/>
</LinearGradientBrush>


// apply the xaml brush from c#
System.Windows.Shapes.Path path =
(System.Windows.Shapes.Path)VisualTreeHelper.GetChild(foundTargetConnector.ConnectorGraph,
0);
LinearGradientBrush brush = TryFindResource("ConnecotrMouseOverBrush") as
LinearGradientBrush;
path.Fill = brush;

I couldn't of done it with out you Linda. Thanks again!

<<<
// change the Fill property of the path directly
LinearGradientBrush brush = new LinearGradientBrush();
brush.EndPoint = new Point(1, 0.5);
brush.StartPoint = new Point(0.181, 0.5);
brush.GradientStops.Add(new GradientStop(Color.FromArgb(0xFF, 0xF7, 0xB0,
0x30), 0.835));
brush.GradientStops.Add(new GradientStop(Color.FromArgb(0xFF, 0xFF, 0xFD,
0xF6), 0.058));

path.Fill =brush;
becuase I will want a cental place to store and modify such values which is
why I attempted to use a style from a global dictionary. In this case,
could I do something like:

LinearGradientBrush brush = new LinearGradientBrush();
brush.style = {DynamicResource someGradientStyle}
path.Fill =brush;

 

[Linda Liu[MSFT]]

Hi George,

Thank you for your quick feedback! I am glad to hear that the problem is
solved now.

You could of course store the brush in a global dictionary and I think it
is a good practice.

If you have any other questions in the future, please don't hesitate to
contact us. It's always our pleasure to be of assitance and I'm happy to
work with you : )

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[santosh kumar]

Hi frnds i have a problem with this sample code

XAML PART

<Canvas Width="200" Height="200" x:Name="Cover1" Canvas.Left="250"
Canvas.Top="100" RenderTransformOrigin="0.5,0.5" Clip="M0,0L200,50
200,200 0,200z" MouseEnter="Cover1_MouseEnter"
MouseLeftButtonDown="Cover1_MouseLeftButtonDown">

<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0.8" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="-10"/>
</TransformGroup>

</Canvas.RenderTransform>
<Image Source="Samples/lake.jpg" Stretch="Fill" Width="200"
Height="200"/>

<Path Stroke="White" Data="M0,0L200,50 200,200 0,200z"
StrokeThickness="15"/>
<Path Stroke="#FF000000" Data="M0,0L200,50 200,200 0,200z"
StrokeThickness="3" Opacity="0.25"/>

</Canvas>

The problem in this code i want to set the Path StrokeThickness = 1 at
runtime using C#

and also i want to change value of Data from ="M0,0L200,50 200,200
0,200z" to some thing else

iam using C# as my Code behind file

thanks a ton if u solved my probelm
thanks a lot for helping a beginner like me