c# - Avalonia Center An Element Inside a Canvas Inside an ItemsRepeater - Stack Overflow

admin管理员组

文章数量:1316307

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

Share Improve this question Follow asked Jan 29 at 10:12 SeiSei 1311 silver badge22 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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>

本文标签： cAvalonia Center An Element Inside a Canvas Inside an ItemsRepeaterStack Overflow