Dynamically Creating User Control

Question

0.00/5 (No votes)

See more:

I modified the Text On A Path in WPF[^] control to include a text alignment property. It all works fine in the test app when the TextOnAPath is created in XAML. However, in my app I want to create it dynamically in code, but I can't get it to work. I think it is because it is not "inheriting" the correct canvas for layout, and consequently has zero size.

I'm probably going about it in a completely anti-MVVM way, but how can I add this control to a canvas dynamically? Do I need to expose some size property? Can I make it auto-size to the path/text it contains? Should I change the ControlTemplate so it is a different kind of Panel (i.e., not a canvas)?

As you can see - I have not idea what I'm about when it comes to WPF!

EDIT:
Progress of a sort - I can set the size of the border simply by setting the .Width and .Height of the control, but the text-on-the-path is not rendering inside.

EDIT 2:
Further progress, I have text rendered on the path! However, I'm using an arbitrary (Ellipse) geometry, not the path I want to use!

Posted 9-Jan-14 13:48pm

Kyudos

Updated 12-Jan-14 11:38am

v4

Add a Solution

Comments

Member 11133165 8-Jun-18 4:01am

Would it be possible for you to share your extension of TextOnAPath with alignment?

2 solutions

Solution 1

If you want to do it in MVVM way, then you need first to create a View(in example it is window with control, and you need to create userControl with an element that you need(TextOnAPath)from example) After that, you create a window with control container and set it to binding. After that you will be able to create it when you need. Now a little example that it will be more clear to you.
Your View:

C#

<usercontrol x:class="TextOnAPathTestApp.UserControl1" xmlns:x="#unknown">
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:TextOnAPath="clr-namespace:TextOnAPath;assembly=TextOnAPath"
    Title="Test App" Height="500" Width="500">
    <grid>
    <textonapath:textonapath fontsize="30" drawpath="True" xmlns:textonapath="#unknown">
        Text="The quick brown fox jumped over the lazy hen.">
            <textonapath:textonapath.textpath>
                <pathgeometry figures="M0,0 C120,361 230.5,276.5 230.5,276.5 <br mode=" hold=" />                      L308.5,237.50001 C308.5,237.50001 419.5,179.5002 367.5,265.49993 <br mode=" />
            </textonapath:textonapath.textpath>
        </textonapath:textonapath>
    </grid>
</usercontrol>

Now let's create a window, where this view can be loaded. Don't forget to enter namespaces with your viewModel

C#

<window x:class="TextOnAPathTestApp.Window1" xmlns:x="#unknown">
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:TextOnAPath="clr-namespace:TextOnAPath;assembly=TextOnAPath"
    Title="Test App" Height="500" Width="500">
<window.resources>
        <datatemplate datatype="{x:Type YourViewModel}">// here you load viewModel of your userControl
            <yourusercontrolview />//here you load view(userControl)
        </datatemplate>
           </window.resources>
    <grid>
     <contentcontrol content="{Binding}" />
    </grid>
</window>

Now to load (TextOnPath) in runtime your window with userControl you need following in some click event:

C#

var window = new WindowThatYouCreated(){DataContext = new YourViewModel() };
window.ShowDialog();

Hope this helped you. If you have questions, feel free to ask.

Posted 9-Jan-14 21:34pm

Alexander Dymshyts

Comments

Kyudos 12-Jan-14 14:38pm

Hi Alexander, Thanks for the answer, which I'm sure is absolutely correct, but I'm not sure helps me out. I'm trying to add some curved text (actually, several dynamically created labels, all curved) to another UserControl. I'm assuming you can use a UserControl inside a UserControl in WPF? I have a limited understanding of MVVM and XAML etc. - for small things like this I'm not convinced that the added complication is worth it!

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kyudos · Accepted Answer · 2014-01-12T15:37:00

After much trial and error, I think I've just about got this where I want it.
The problem was largely due to me trying to use one path object for two purposes - transforms were then screwing up the results. I also didn't notice (until I temporarily coloured the canvas) that there was a margin I wasn't accounting for. This made my attempts at accurate positioning futile!