Windows Runtime: How to set image in a ellipse shape button?

Question

<Button x:Name="btnProfilePicture" HorizontalAlignment="Center" Click="btnProfilePicture_Click">
    <Button.Template>
        <ControlTemplate>
            <Ellipse x:Name="ellipsePicture" Fill="Turquoise" Width="150" Height="150" Stroke="White" StrokeThickness="10">
            </Ellipse>
        </ControlTemplate>
    </Button.Template>
</Button >

I have a button in ellipse shape, with color fill by default. I want to change the fill to an image in code-behind in runtime.

How can I do this?

More info: I tried to set the ellipse fill by using the "ellipsePicture" name but this name cannot be referenced in the code behind but I dont know the reason.

Answer 1

Try the following code..

<Button x:Name="BtnProfilePicture" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10">
            <Button.Template>
                <ControlTemplate>
                    <Grid Height="100">
                        <Ellipse x:Name="ellipsePicture" Fill="{TemplateBinding Background}"/>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button >

On your code behind add the following line..

BtnProfilePicture.BackgroundImage = 
           new ImageBrush { ImageSource = LoadBackgroundImage(yourfilename.jpg)};

Vote me if this works!

Answer 2

Try this:

<Button x:Name="btnProfilePicture" HorizontalAlignment="Center" Click="btnProfilePicture_Click">
<Button.Template>
    <ControlTemplate>
        <Ellipse x:Name="ellipsePicture" Width="150" Height="150" Stroke="White" StrokeThickness="10">
            <Ellipse.Fill>
                <ImageBrush ImageSource="/DessCol;component/Images/Recommencer.ico"/>
            </Ellipse.Fill>
        </Ellipse>
    </ControlTemplate>
</Button.Template>

Answer 3

You can use Background property of the button to set image on the background.You can use it from code behind also like:

public BitmapImage LoadBackgroundImage(string fileName)
{
            var image = new BitmapImage();
            try
            {
                image.BeginInit();
                if (!string.IsNullOrEmpty(fileName) && File.Exists(fileName))
                {
                    var bytes = File.ReadAllBytes(fileName);
                    image.StreamSource = new MemoryStream(bytes);
                }
                else
                {
                    var bytes = File.ReadAllBytes(Path.GetFullPath(Properties.Resources.DefaultBackgroundImage));
                    image.StreamSource = new MemoryStream(bytes);
                }
                image.CacheOption = BitmapCacheOption.OnLoad;
                image.EndInit();
                image.Freeze();
            }
            catch (FileNotFoundException ex)
            {
                  throw ex;
            }

            return image;
        }

in your button click event add the following line

btnProfilePicture.Background=LoadBackgroundImage(yourfilename.jpg); //you can use .jpg,.jpeg,*.png

Answer 4

Try it. After this modify you can set image to content. This changes you can made at XAML and runtime.

      <Button Content="C:\Round.JPG">
            <Button.Template>
                <ControlTemplate>
                    <Ellipse x:Name="ellipsePicture" Width="150" Height="150" Stroke="White" StrokeThickness="10">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}},
                                                          Path=Content}"/>
                        </Ellipse.Fill>
                    </Ellipse>
                </ControlTemplate>
            </Button.Template>
        </Button>