Why I cannot set canvas's width via binding method? - xaml

Question

My UI elements' layout (nest relation) is:
toolbarGrid -> toolbarCanvas -> toolbarPanel -> some buttons
My purpose is to make animation of those buttons.
The issue is that I use Debug.Write() to monitor the Width and ActualWidth parameters of the UI elements. And I found that when App screen size is changed, only toolbarGrid size is changed accordingly. While the other UI elements' sizes are not changed at all, although I use Binding method to bind their Width and ActualWidth to toolbarGrid.
So how can I set their Width and ActualWidth so that they could change according to App screen's real size?
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

I tried to understand your problem. If the problem was that u like to Elements follow actual screen size this one works. I changed the XAML code and hoping that next solution works fine for you. I rid of the Canvas because that element cause the problem. Anyway, in this example u do not need it (unless u have planned some other use later). And also to set Row/Column Width/Height values is unneeded. Bindings are also unnessessary.
<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>