Krekkon
Krekkon

Reputation: 1347

Adding collection of Images in Xaml

I would like to paint Images to the XAML page in Windows Store App. The main goal is that:

Adding Images (e.g. flower leaf) to a circle on the center like that:

enter image description here

I have a simple solution to that, but its is very redundant.

<Image Height="200" Width="200" Source="{Binding ActualImage.NormalUri}">
    <Image.RenderTransform>
        <RotateTransform Angle="12"></RotateTransform>
    </Image.RenderTransform>
</Image> 

... // And 28 other like these

<Image Height="200" Width="200" Source="{Binding ActualImage.NormalUri}">
    <Image.RenderTransform>
        <RotateTransform Angle="360"></RotateTransform>
    </Image.RenderTransform>
</Image>

How can I do that with a binding of a Image collection? What XAML control should I use?

Upvotes: 0

Views: 99

Answers (2)

Krekkon
Krekkon

Reputation: 1347

The Solution of Nate Diamond is much more nicer and better, but I solved it from code-behind for earn the easier way:

foreach (Petal petalObject in MainPageViewModel.Petals)
    {
        var petalImage = new Image
        {
            Height = petalObject.Height,
            Width = petalObject.Width,
            RenderTransform = new RotateTransform() {Angle = petalObject.Angle},
            Source = new BitmapImage(new Uri(petalObject.NormalUri)),
        };

        PetalsGrid.Children.Add(petalImage);
    }

Upvotes: 0

Nate Diamond
Nate Diamond

Reputation: 5575

Use a custom class which inherits from ItemsControl. You can then override the necessary functions, such as ones to determine the angle to rotate between each item. I think it's likely you'll want to use this PrepareContainerForItemOverride for this.

One thing to note that you will have to do is to define a new ItemsPanel. The default is a StackPanel, which will not work. You'll likely want to use something like a Canvas, which allows you to explicitly position items in it.

Upvotes: 1

Related Questions