XAML 通过Avalonia的交互式Map视图

ibrsph3r 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(302)

我需要做一个城市的互动Map。一些建筑物只是背景。一些建筑物是互动的，当用户点击它们时，它们会触发一个事件。
问题是支持调整UI大小。交互式建筑应该沿着整个Map改变它们的大小，而不是改变它们相对于Map的位置。
我试过使用Canvas。Map通过Image显示。交互式建筑物是带有Image内容的按钮。不幸的是，使用这种实现，我必须计算代码中所有图像的大小和位置，并在调整应用程序窗口大小时更改它们。
你认为有更方便的解决办法吗？

<UserControl <...>
             Bounds="{Binding CanvasBounds, Mode=OneWayToSource}">
    
    <Canvas VerticalAlignment="Stretch"
            HorizontalAlignment="Stretch"
            ClipToBounds="True">
        
        <!-- This is city map image -->
        <Image Canvas.Left="0"
               Canvas.Top="0"
               ZIndex="1"
               Stretch="Uniform"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch"
               IsEnabled="False"
               Width="{Binding MapImageWidth, Mode=OneWay}"
               Height="{Binding MapImageHeight, Mode=OneWay}"
               Source="avares://App/Assets/Images/Map0/map.png"/>
        
        <!-- This is button of interactive building -->
        <Button Canvas.Left="72"
                Canvas.Top="124"
                Classes="GameMapButton">
            <Image Source="avares://App/Assets/Images/Map0/big_office_0_normal.png"/>
            
            <Button.Styles>
                <Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                    <Setter Property="Content">
                        <Template>
                            <Image Source="avares://App/Assets/Images/Map0/big_office_0_pointerover.png"/>
                        </Template>
                    </Setter>
                </Style>
            </Button.Styles>
            
            <Button.Styles>
                <Style Selector="Button:pressed /template/ ContentPresenter#PART_ContentPresenter">
                    <Setter Property="Content">
                        <Template>
                            <Image Source="avares://App/Assets/Images/Map0/big_office_0_pressed.png"/>
                        </Template>
                    </Setter>
                </Style>
            </Button.Styles>
        </Button>
        
        <...>
    </Canvas>
</UserControl>

xaml

来源：https://stackoverflow.com/questions/75348044/an-interactive-map-view-via-avalonia

1条答案

按热度按时间

bcs8qyzn1#

我尝试在UserControl的根目录下使用Viewbox，由于Canvas不想这样显示，所以我用一个普通的Panel来代替它，按钮的位置是通过Margin来设置的，我必须手动找到所有的偏移量，每次修改后重新启动应用程序，非常累。
解决方案似乎起作用了。当调整应用程序窗口大小时，按钮不会相对于Map移动，并按比例改变大小。

<UserControl ...>
<Viewbox Stretch="Uniform">
    <Panel>
        <Image ZIndex="1"
               IsEnabled="False"
               Source="avares://App/Assets/Images/Map0/map.png" />

        <Button Margin="73 -210 0 0"
                Classes="GameMapButton">
            <Image Source="avares://App/Assets/Images/Map0/big_office_0_normal.png" />

            <Button.Styles>
                <Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                    <Setter Property="Content">
                        <Template>
                            <Image
                                Source="avares://App/Assets/Images/Map0/big_office_0_pointerover.png" />
                        </Template>
                    </Setter>
                </Style>
            </Button.Styles>

            <Button.Styles>
                <Style Selector="Button:pressed /template/ ContentPresenter#PART_ContentPresenter">
                    <Setter Property="Content">
                        <Template>
                            <Image Source="avares://App/Assets/Images/Map0/big_office_0_pressed.png" />
                        </Template>
                    </Setter>
                </Style>
            </Button.Styles>
        </Button>

        <Button Margin="720 -285 0 0"
                Classes="GameMapButton">
            <Image Source="avares://App/Assets/Images/Map0/middle_office_0_normal.png" />

            <Button.Styles>
                <Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                    <Setter Property="Content">
                        <Template>
                            <Image
                                Source="avares://App/Assets/Images/Map0/middle_office_0_pointerover.png" />
                        </Template>
                    </Setter>
                </Style>
            </Button.Styles>

            <Button.Styles>
                <Style Selector="Button:pressed /template/ ContentPresenter#PART_ContentPresenter">
                    <Setter Property="Content">
                        <Template>
                            <Image
                                Source="avares://App/Assets/Images/Map0/middle_office_0_pressed.png" />
                        </Template>
                    </Setter>
                </Style>
            </Button.Styles>
        </Button>

        <...>
    </Panel>
</Viewbox>

这感觉就像写代码，解决方案是愚蠢的。我会很高兴的替代选择。

赞(0）回复(0）举报 2023-02-06

我来回答

XAML 通过Avalonia的交互式Map视图

1条答案

相关问题

热门标签

最新问答