Resize Canvas when resizing Main window-CodePudding

I am trying to resize a canvas that is include into a TabControl, I want it to resize when I resize the window at execution time

I tried to resive the canvas using event SizeChanged and then scale it but it is not working, it does not resize the elements inside the canvas, that are rectangles, they just disappear when I make the window smaller

This is the XAML code I am using

<Window x:Class="practica_final.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:local="clr-namespace:customer_purchases"
        mc:Ignorable="d"
        Title="Customer" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Column="0" Grid.Row="0">
            <Button Name="btnCustomer" Content="Add Customer" Margin="10" Click="btnCustomer_Click"/>
        </StackPanel>
        <StackPanel Grid.Row="2">
            <Button Name="btnExit" Content="Exit" Margin="10" Background="Tan" Click="btnExit_Click"/>
            <Button Name="btnHelp" Content="Help" Margin="10" Click="btnHelp_Click"/>
        </StackPanel>
        <Border BorderBrush="Black" BorderThickness="1"  Grid.RowSpan="2" Grid.Column="1" Grid.Row="1" />
        <TabControl Grid.RowSpan="2" Grid.Column="1" Grid.Row="1">
            <TabItem Name="tabItemCustomer" Header="Customer">
                <Canvas Name="canvasCustomer" Background="LightYellow"
                            SizeChanged="canvasCustomer_SizeChanged"/>
            </TabItem>
            <TabItem Name="tabItemPurchases" Header="Purchases">
                <Canvas Name="canvasPurchases" Background="CornflowerBlue"
                            SizeChanged="canvasPurchases_SizeChanged"/>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

In the MainWindow.xaml.cs I have the sizeChanged code

namespace customer_purchases{  
    public partical class MainWindow : Window {      
        private ScaleTransform sc;
        private TranslateTransform tt;
        private TransformGroup tg;

        public MainWindow() 
        {
            InitializeComponent();
            sc = new ScaleTransform();
            tt = new TranslateTransform();
            tg = new TransformGroup();
            tg.Children.Add(tt);
            tg.Children.Add(sc);
        }

        [...]

        private void canvasCustomer_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            width = canvasCoche.ActualWidth;
            height = canvasCoche.ActualHeight;

            tt.X = 10;
            tt.Y = 10;

            sc.ScaleX = ancho / 20;
            sc.ScaleY = alto / 20;
        }
    }
}

I also tried including the Canvas into a ViewBox but I couldn't see the results properly when executing it

CodePudding user response：

You do not need to listen to any size chaned events just use a viewbox around your canvas like this:

<Viewbox>
    <Canvas Height="100" Width="100" Background="Lime">
        <Rectangle Canvas.Top="10" Canvas.Left="20" Height="10" Width="10" Fill="hotpink"/>
    </Canvas>
</Viewbox>

the canvas will strech its content to the size of the parent its important to hardcode the canvas size to make this work as expected.