I'm trying to replicate a very simple CSS effect that zooms the background of a container on hover in Avalonia. For this, I'm using a Canvas and an Image, which allows the image to clip as intended, albeit from the top left corner, instead of the center of the canvas. I would like to have the image aligned in the center and stay aligned there, even during resizing. My setup looks something like this:

<ItemsRepeater>
    <ItemsRepeater.ItemTemplate>
        <Button>
            <Canvas Width="300" Height="200" ClipToBounds="True">
                <Image Source="{Binding Thumbnail}" Stretch="Uniform" />
            </Canvas>
        </Button>
    </ItemsRepeater.ItemTemplate>
</ItemsRepeater>

<Style Selector="ItemsRepeater Button Image">
    <Setter Property="Width" Value="300"/>
</Style>
<Style Selector="ItemsRepeater Button:pointerover Image">
    <Setter Property="Width" Value="320"/>
</Style>

Unfortunately naming the elements and setting the canvas top/left in the code-behind isn't an option as far as I'm aware due to the ItemsRepeater. Neither is iterating over the items, as Avalonia doesn't support something like ItemsRepeater.Items.

I'm honestly incredibly stumped, because something like this can be done in like two lines of CSS. Any help would be appreciated.

I'm trying to replicate a very simple CSS effect that zooms the background of a container on hover in Avalonia. For this, I'm using a Canvas and an Image, which allows the image to clip as intended, albeit from the top left corner, instead of the center of the canvas. I would like to have the image aligned in the center and stay aligned there, even during resizing. My setup looks something like this:

<ItemsRepeater>
    <ItemsRepeater.ItemTemplate>
        <Button>
            <Canvas Width="300" Height="200" ClipToBounds="True">
                <Image Source="{Binding Thumbnail}" Stretch="Uniform" />
            </Canvas>
        </Button>
    </ItemsRepeater.ItemTemplate>
</ItemsRepeater>

<Style Selector="ItemsRepeater Button Image">
    <Setter Property="Width" Value="300"/>
</Style>
<Style Selector="ItemsRepeater Button:pointerover Image">
    <Setter Property="Width" Value="320"/>
</Style>

Unfortunately naming the elements and setting the canvas top/left in the code-behind isn't an option as far as I'm aware due to the ItemsRepeater. Neither is iterating over the items, as Avalonia doesn't support something like ItemsRepeater.Items.

I'm honestly incredibly stumped, because something like this can be done in like two lines of CSS. Any help would be appreciated.

• c#
• xaml
• avaloniaui
• avalonia

1 Answer 1

You may want to set the Image's RenderTransform property:

<Style Selector="ItemsRepeater Button:pointerover Image">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <ScaleTransform ScaleX="1.067" ScaleY="1.067"/>
        </Setter.Value>
    </Setter>
</Style>
    
<ItemsRepeater ItemsSource="{Binding Items}">
    <ItemsRepeater.ItemTemplate>
        <DataTemplate>
            <Button>
                <Image Width="300" Height="200" Source="{Binding Thumbnail}"/>
            </Button>
        </DataTemplate>
    </ItemsRepeater.ItemTemplate>
</ItemsRepeater>
</Grid>