XAML：将椭圆与均匀拉伸对齐到中心

Posted 2023-03-30

【中文标题】XAML：将椭圆与均匀拉伸对齐到中心

【英文标题】：XAML: align Ellipse with Uniform stretch to the center

【发布时间】：2015-09-03 10:42:52

【问题描述】：

我正在尝试将具有统一拉伸的椭圆对齐到中心（垂直和水平）。但是当我将 Horizo​​ntalAlignment="Center" 和/或 VerticalAlignment="Center" 添加到 Ellipse 时，它​​就变得不可见了。

这是我的 XAML 代码：

<Grid Grid.Row="1" Margin="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>


        <Ellipse x:Name="Ellipse_AccountImage" Grid.Row="0" Grid.Column="0" Stretch="Uniform">
            <Ellipse.Fill>
                <ImageBrush x:Name="ImageBrush_AccountImage"/>
            </Ellipse.Fill>
        </Ellipse>
        <Grid x:Name="Grid_AccountInfo">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0" Style="ThemeResource BaseTextBlockStyle" Text="Name:" Margin="0,0,12,0"/>
            <TextBlock Grid.Row="0" Grid.Column="1" Style="ThemeResource BodyTextBlockStyle" x:Name="TextBlock_Name"/>

            <TextBlock Grid.Row="1" Grid.Column="0" Style="ThemeResource BaseTextBlockStyle" Text="Email:" Margin="0,0,12,0"/>
            <TextBlock Grid.Row="1" Grid.Column="1" Style="ThemeResource BodyTextBlockStyle" x:Name="TextBlock_Email"/>

            <TextBlock Grid.Row="2" Grid.Column="0" Style="ThemeResource BaseTextBlockStyle" Text="Created:" Margin="0,0,12,0"/>
            <TextBlock Grid.Row="2" Grid.Column="1" Style="ThemeResource BodyTextBlockStyle" x:Name="TextBlock_Created"/>
        </Grid>
    </Grid>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="800"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Ellipse_AccountImage.(Grid.RowSpan)" Value="2"/>
                    <Setter Target="Ellipse_AccountImage.Margin" Value="0,0,24,0"/>
                    <Setter Target="Grid_AccountInfo.(Grid.Row)" Value="0"/>
                    <Setter Target="Grid_AccountInfo.(Grid.Column)" Value="1"/>
                    <Setter Target="Grid_AccountInfo.(Grid.RowSpan)" Value="2"/>
                    <Setter Target="Grid_AccountInfo.VerticalAlignment" Value="Center"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Ellipse_AccountImage.(Grid.ColumnSpan)" Value="2"/>
                    <Setter Target="Ellipse_AccountImage.Margin" Value="0,0,0,24"/>
                    <Setter Target="Grid_AccountInfo.(Grid.Row)" Value="1"/>
                    <Setter Target="Grid_AccountInfo.(Grid.Column)" Value="0"/>
                    <Setter Target="Grid_AccountInfo.(Grid.ColumnSpan)" Value="2"/>
                    <Setter Target="Grid_AccountInfo.HorizontalAlignment" Value="Center"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

我已经尝试将 Ellipse 元素放在 ViewBox、Canvas 或 Grid 中，但这并不能解决问题。

【问题讨论】：

它是不可见的，因为您没有指定宽度和高度。

如果将 Stretch 属性设置为 Uniform，图像会缩放以适合输出尺寸，但内容的纵横比会保留，解决方法将为 Ellipse 设置固定 Width 和 Height 或设置拉伸填充（消除纵横比）

此外，当网格大小发生变化时，可以在后面的代码中设置固定宽度和高度（实际上是更新它），以便它总是适当地伸展。

【参考方案1】：

从上面的 cmets 看来，仅使用 XAML 是不可能解决这个问题的。相反，我编写了一个函数，每次调整页面大小时手动更新宽度和高度（就像 igrali 说的那样）。感谢您的帮助！