[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 159
  • Last Modified:

Xaml noob having no luck with .Streach

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
Dodsworth
Asked:
Dodsworth
  • 8
  • 7
1 Solution
 
Bob LearnedCommented:
Can you show me the XAML that you are working with please?
0
 
DodsworthAuthor Commented:
          <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
 
Bob LearnedCommented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
DodsworthAuthor Commented:
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
 
Bob LearnedCommented:
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
 
DodsworthAuthor Commented:
So how to make the ellipse always fill the button when the button is sized?
0
 
Bob LearnedCommented:
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
 
DodsworthAuthor Commented:
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
 
Bob LearnedCommented:
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
 
DodsworthAuthor Commented:
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
 
Bob LearnedCommented:
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
 
DodsworthAuthor Commented:
Ellipse is NotInheritable for some reason.

I need to create new ellipses from VB.net tho.
0
 
Bob LearnedCommented:
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
 
DodsworthAuthor Commented:
Ok but how do I instantiate it ?
0
 
Bob LearnedCommented:
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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now