?
Solved

Xaml noob having no luck with .Streach

Posted on 2013-11-08
15
Medium Priority
?
153 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
How To Reduce Deployment Times With Pre-Baked AMIs

Even if we can't include all the files in the base image, we can sometimes include some of the larger files that we would otherwise have to download, and we can also sometimes remove the most time-consuming steps. This can help a lot with reducing deployment times.

 
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 2000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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 long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…
Suggested Courses

777 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