Solved

Xaml noob having no luck with .Streach

Posted on 2013-11-08
15
139 Views
Last Modified: 2013-11-13
I'm trying to place an Ellipse in a Button so that when the Button sizes, the Ellipse does too.  

Simple enough ?  I can't get it to work :(
0
Comment
Question by:Dodsworth
  • 8
  • 7
15 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39635718
Can you show me the XAML that you are working with please?
0
 
LVL 1

Author Comment

by:Dodsworth
ID: 39636638
          <Button HorizontalAlignment="Left" Margin="79,82,0,0" VerticalAlignment="Top">
                <Ellipse Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" Stretch="Uniform"/>
            </Button>

Open in new window


oops I spelt Stretch wrong in the title !
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39637393
Maybe you are looking for Stretch="Fill", instead of Stretch="Uniform":

<Button HorizontalAlignment="Left" Margin="79,82,0,0" VerticalAlignment="Top">
   <Ellipse Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="170" Stretch="Fill"/>
</Button>

Open in new window

0
 
LVL 1

Author Comment

by:Dodsworth
ID: 39638114
Fill does nothing at all.  I read that fill was the default behaviour for an ellipse.

For Ellipse or Rectangle, the default Stretch behavior is Fill, because their entire sizing logic is based on the Width and Height. Setting Stretch to None for an Ellipse or Rectangle effectively makes it nonrendering.

The only option that seems to do any sizing at all is UniformToFill, but that clips the ellipse.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39638506
That XAML filled the button area with an ellipse, instead of making the width and height the same dimensions.  The button dimensions are set by the dimensions of the ellipse.
0
 
LVL 1

Author Comment

by:Dodsworth
ID: 39638761
So how to make the ellipse always fill the button when the button is sized?
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39638768
I would size the ellipse, and then the button size will follow.  You would need to do that in the XAML editor, instead of the designer.  

If you want something different, then we would need to find a different approach.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:Dodsworth
ID: 39639382
OK.. I'll come clean.

I actually want to inherit an ellipse and add properties to it.

Getting nowhere with that, I thought about putting an ellipse in a button, inheriting the button in my class and hoping XAML would sort the sizing of the ellipse ?

*pulls out hair*
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39639408
If you want to inherit from an Ellipse, what type of properties would you be adding, and how would you be using this extended Ellipse?
0
 
LVL 1

Author Comment

by:Dodsworth
ID: 39640985
Ellipses can be created, sized, moved and colo(u)red.  They have an owner, a parent, a sequence number, created/updated date amongst other properties.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39641457
What problems did you have inheriting from Ellipse, and extending it with additional properties?

It sounds like you just need a user control that has elliptical behaviors, like this:

<UserControl x:Class="CircleBorderTest.CircleBorder"
             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:local="clr-namespace:CircleBorderTest" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.ContentTemplate>
        <DataTemplate DataType="UserControl">
            <DataTemplate.Resources>
                <local:CircleMarginConverter x:Key="CircleMarginConverter"/>
            </DataTemplate.Resources>
            <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
                <ContentPresenter Content="{TemplateBinding Content}">
                    <ContentPresenter.Margin>
                        <MultiBinding Converter="{StaticResource CircleMarginConverter}">
                            <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
                            <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
                        </MultiBinding>
                    </ContentPresenter.Margin>
                </ContentPresenter>
                <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Red" StrokeThickness="1px"/>
            </Grid>            
        </DataTemplate>
    </UserControl.ContentTemplate>
</UserControl>

Open in new window


Usage:

<Window x:Class="CircleBorderTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:circle="clr-namespace:CircleBorderTest"
        Title="MainWindow" Height="350" Width="525">
    <circle:CircleBorder>
    </circle:CircleBorder>
</Window>

Open in new window

0
 
LVL 1

Author Comment

by:Dodsworth
ID: 39641645
Ellipse is NotInheritable for some reason.

I need to create new ellipses from VB.net tho.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39642243
The UserControl can be used anywhere, since it is defined in XAML, and it contains an Ellipsis element:

<Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Red" StrokeThickness="1px"/>
0
 
LVL 1

Author Comment

by:Dodsworth
ID: 39643955
Ok but how do I instantiate it ?
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 500 total points
ID: 39644545
The example shows how to create an instance:

1) Add a prefix namespace, referencing the assembly where the user control is:

xmlns:circle="clr-namespace:CircleBorderTest"

2) Add an instance to the window, using the prefix + class name.

<circle:CircleBorder>
    </circle:CircleBorder>
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

This article describes relatively difficult and non-obvious issues that are likely to arise when creating COM class in Visual Studio and deploying it by professional MSI-authoring tools. It is assumed that the reader is already familiar with the cla…
More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now