Почему я не могу установить ширину холста с помощью метода привязки?

Question

Расположение элементов моего пользовательского интерфейса (отношение гнезд):

toolbarGrid -> toolbarCanvas -> toolbarPanel -> some buttons

Моя цель - сделать анимацию этих кнопок. Проблема в том, что я использую Debug.Write() для мониторинга параметров Width и ActualWidth элементов пользовательского интерфейса. И я обнаружил, что при изменении размера экрана приложения, только toolbarGrid размер изменяется соответственно. Хотя размеры других элементов пользовательского интерфейса не меняются вообще, хотя я использую метод 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, потому что этот элемент вызывает проблему. Во всяком случае, в этом примере вам это не нужно (если только вы не запланировали какое-то другое использование позже). А также для установки значений Row / Column Width / Height нет необходимости. Привязки также не нужны.

<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>