Question

我的UI元素的布局（嵌套关系）为：

toolbarGrid -> toolbarCanvas -> toolbarPanel -> some buttons

我的目的是制作这些按钮的动画。问题是我使用Debug.Write()来监视UI元素的Width和ActualWidth参数。而且我发现，更改应用程序屏幕大小时，只有toolbarGrid大小会相应更改。尽管其他UI元素的大小完全不变，但是我使用Binding方法将其Width和ActualWidth绑定到toolbarGrid。

那么我该如何设置它们的Width和ActualWidth以便它们可以根据应用程序屏幕的实际大小进行更改？

toolbarPanel width = 1920, actualWidth = 1920
toolbarGrid width = NaN, actualWidth = 1034
toolbarBackground width = 1920, actualWidth = 1920
toolbarCanvas width = 1920, actualWidth = 1920

  <Grid x:Name="gridTotal">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Rectangle x:Name="recTangle1" Grid.Column="0" Grid.Row="0"/>
        <Rectangle x:Name="recTangle2" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12"/>

        <Grid x:Name="toolbarGrid" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12">
            <Canvas x:Name="toolbarCanvas" Width="{Binding ElementName=toolbarGrid, Path=ActualWidth}">
                <RelativePanel x:Name="toolbarPanel" Canvas.Top="0" Width="{Binding ElementName=toolbarGrid, Path=ActualWidth}">
                    <Image x:Name="toolbarBackground" Source="ms-appx:///Assets/MainPage/toolbar/toolbar-background2.png" 
                       Width="{Binding ElementName=toolbarGrid, Path=ActualWidth}" 
                       Height="{Binding ElementName=toolbarGrid, Path=ActualHeight}" Stretch="Fill" />

                    <Viewbox x:Name="vb2" Stretch="Uniform" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="20,0,20,0"
                         Height="{Binding ElementName=recTangle1, Path=ActualHeight}" 
                         Width="{Binding ElementName=recTangle1, Path=ActualWidth}">
                        <Button x:Name="toolbarHistory" Style="{StaticResource toolbarImageStyle}">
                            <Image Source="ms-appx:///Assets/MainPage/toolbar/toolbar-history.png" Stretch="UniformToFill" />
                        </Button>
                    </Viewbox>
                </RelativePanel>
            </Canvas>
        </Grid>
    </Grid>

Answer 1

我试图了解您的问题。如果问题是您喜欢Elements遵循实际的屏幕尺寸，则此方法可行。我更改了XAML代码，并希望下一个解决方案对您有效。我删除了Canvas，因为该元素引起了问题。无论如何，在此示例中，您不需要它（除非您稍后计划了其他用途）。并且也不需要设置行/列的宽度/高度值。绑定也是不必要的。

<Grid x:Name="gridTotal">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Rectangle x:Name="recTangle1" Grid.Column="0" Grid.Row="0"/>
    <Rectangle x:Name="recTangle2" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12"/>

    <Grid x:Name="toolbarGrid" Grid.Column="0" Grid.Row="8" Grid.ColumnSpan="12">
        <RelativePanel x:Name="toolbarPanel" Canvas.Top="0">
            <Image x:Name="toolbarBackground" Source="ms-appx:///Assets/MainPage/toolbar/toolbar-background2.png" Stretch="Fill" />
            <Viewbox x:Name="vb2" Stretch="Uniform" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="20,0,20,0">
                <Button x:Name="toolbarHistory">
                    <Image Source="ms-appx:///Assets/MainPage/toolbar/toolbar-history.png" Stretch="UniformToFill" />
                </Button>
            </Viewbox>
        </RelativePanel>
    </Grid>
</Grid>

为什么无法通过绑定方法设置画布的宽度？

1 个答案: