如何实现最大尺寸为父级40%宽30%高的响应式Avalonia Canvas

你可以通过给ViewBox绑定父容器尺寸的比例值来设置最大宽高，同时保留ViewBox的缩放特性，实现符合要求的响应式Canvas。具体修改方案如下：

核心思路 #

• 给父容器（StackPanel）命名，用于绑定获取实际尺寸
• 给ViewBox设置MaxWidth和MaxHeight，分别绑定到父容器宽度的40%、高度的30%
• 保留ViewBox的Stretch="Uniform"，确保Canvas按原始比例缩放，不会变形

修改后的完整代码 #

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:LocalArena.ViewModels"
             xmlns:converters="clr-namespace:Avalonia.Markup.Xaml.Converters;assembly=Avalonia.Base"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="LocalArena.Views.MapsView"
             x:DataType="vm:MapsViewModel">
  <!-- 给StackPanel命名，用于绑定尺寸 -->
  <StackPanel x:Name="RootPanel">
      <!-- 绑定MaxWidth/MaxHeight到父容器的40%宽、30%高 -->
      <Viewbox Stretch="Uniform"
               MaxWidth="{Binding #RootPanel.ActualWidth, Converter={x:Static converters:DoubleConverters.Multiply}, ConverterParameter=0.4}"
               MaxHeight="{Binding #RootPanel.ActualHeight, Converter={x:Static converters:DoubleConverters.Multiply}, ConverterParameter=0.3}">
          <Canvas Height="300" Width="320" Background="Yellow" Margin="20">
              <Rectangle Fill="Red" Height="100" Width="100" Margin="10"/>
              <Rectangle Fill="Blue" Height="100" Width="100" Opacity="0.5"
                         Canvas.Left="50" Canvas.Top="20"/>
              <Rectangle Fill="Green" Height="100" Width="100"
                         Canvas.Left="60" Margin="40" Canvas.Top="40"/>
              <Rectangle Fill="Orange" Height="100" Width="100"
                         Canvas.Right="70" Canvas.Bottom="60"/>
          </Canvas>
      </Viewbox>
      <DataGrid Margin="20" ItemsSource="{Binding MapItems}"
          AutoGenerateColumns="True" IsReadOnly="True"
          GridLinesVisibility="All"
          BorderThickness="1" BorderBrush="Gray">
      </DataGrid>
  </StackPanel>
</UserControl>

关键说明 #

1. 命名父容器：给StackPanel添加x:Name="RootPanel"，这样可以通过#RootPanel在绑定中引用它的实际尺寸
2. 使用内置转换器：引入Avalonia.Markup.Xaml.Converters命名空间，用DoubleConverters.Multiply转换器直接计算父容器尺寸的比例值，无需自定义转换器
3. ViewBox的作用：Stretch="Uniform"保证Canvas始终按原始宽高比（320:300）缩放，而MaxWidth/MaxHeight限制了Canvas的最大显示尺寸，不会超过父容器的40%宽度和30%高度
4. Canvas的固定尺寸：Canvas的Width="320"和Height="300"是原始设计尺寸，ViewBox会基于这个尺寸进行等比例缩放，确保内部元素的相对位置和大小不变

内容的提问来源于stack exchange，提问作者Cedric Royer-Bertrand