Solved

Xaml noob having no luck with .Streach

Posted on 2013-11-08
15
151 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
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
 
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 Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

IP addresses can be stored in a database in any of several ways.  These ways may vary based on the volume of the data.  I was dealing with quite a large amount of data for user authentication purpose, and needed a way to minimize the storage.   …
Many of us here at EE write code. Many of us write exceptional code; just as many of us write exception-prone code. As we all should know, exceptions are a mechanism for handling errors which are typically out of our control. From database errors, t…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

749 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