WPF - 6 (Layout)

აპლიკაციის განლაგების განსაზღვრისთვის შეგიძლიათ გამოიყენოთ კლასი, რომლიც მემკვიდრეა Panel კლასისა. რამდენიმე განლაგების კონტეინერებია ხელმისაწვდომი, რომლებსაც მე განვიხილავ. განლაგების კონტეინერს ესაჭიროება ჩაატაროს ორი დავალება: გაზომოს და დაალაგოს (measure და arrange). გაზომვით კონტეინერი „ეკითხება“ შვილ კონტროლებს თუ რამდენი ადგილი ესაჭიროებათ მათ. რადგან შვილის მიერ შეთავაზებული ადგილი შეიძლება არ იყოს კონტეინერში მოთავსებადი (ჩატევადი), ამის შემდეგ კონტეინერი წყვეტს, თუ როგორ დაალაგოს შვილეული კონტროლები ოპტიმალურად.

შვილეულ / შვილ კონტროლებში ვგულისხმობ იმათ, რომლებიც მოთავსებულები არიან კონტეინერში. რომ წარმოვიდგინოთ ყუთი და ამ ყუთში მოთავსებული ღილაკი, იარლიყი და კიდევ სხვა. მოცემული გვაქვს 5 სახის განლაგების კონტეინერი, რომლების უნიკალურები არიან თავიანთი თვისებებით.

   Ø  StackPanel

   Ø  WrapPanel

   Ø  Canvas

   Ø  DockPanel

   Ø  Grid

დავიწყოთ თავიდან.

StackPanel

ფანჯარა შეიძლება შეიცავდეს ერთ კონტროლს როგორც შვილ კონტროლს. თუ საჭიროა, რომ ფანჯარაში ერთზე მეტი კონტროლი იყოს, მაშინ ერთ-ერთი გზაა გამოიყენოთ StackPanel, როგორც ფანჯრის შვილეული და შემდეგ მასში ჩასვათ სხვა კონტროლები. ეს კონტეინერი საკმაოდ მარტივია, რომელიც ერთ ელემენტს აჩვენებს მეორეს გვერდით. StackPanel ის ორიენტაცია შეიძლება იყოს ჰორიზონტალური და ვერტიკალური. ინფორმაციისთვის ToolBarPanel კლასი არის StackPanel ის მემკვიდრე.

ზემოთ მოცემულია StackPanel ის როგორც ჰორიზონტალური ისე ვერტიკალური ვერსია. ქვემოთ კი XAML კოდი

<Window x:Class="App_for_blogpost_tutorials.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <StackPanel>

        <StackPanel Orientation="Vertical" Margin="0,0,0,20">

            <Label>Label</Label>

            <TextBox>TextBox</TextBox>

            <CheckBox>CheckBox</CheckBox>

            <CheckBox>CheckBox</CheckBox>

            <ListBox>

                <ListBoxItem>ListBoxItem One</ListBoxItem>

                <ListBoxItem>ListBoxItem Two</ListBoxItem>

            </ListBox>

        </StackPanel>

        <StackPanel Orientation="Horizontal">

            <Label>Label</Label>

            <TextBox>TextBox</TextBox>

            <CheckBox>CheckBox</CheckBox>

            <CheckBox>CheckBox</CheckBox>

            <ListBox>

                <ListBoxItem>ListBoxItem One</ListBoxItem>

                <ListBoxItem>ListBoxItem Two</ListBoxItem>

            </ListBox>

        </StackPanel>

    </StackPanel>

</Window>

WrapPanel

ეს განლაგება ელემენტებს ათავსებს მარცხნიდან მარჯვნივ თითოეულის მიმდევრობით. ამ განლაგებასაც შეიძლება ჰქონდეს როგორც ვერტიკალური, ისე ჰორიზონტალური ორიენტაცია

<Window x:Class="App_for_blogpost_tutorials.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <WrapPanel>

        <Button Width="100" Margin="5">Button1</Button>

        <Button Width="100" Margin="5">Button2</Button>

        <Button Width="100" Margin="5">Button3</Button>

        <Button Width="100" Margin="5">Button4</Button>

        <Button Width="100" Margin="5">Button5</Button>

        <Button Width="100" Margin="5">Button6</Button>

        <Button Width="100" Margin="5">Button7</Button>

        <Button Width="100" Margin="5">Button8</Button>

    </WrapPanel>

</Window>

აპლიკაციის ზომის შეცვლის ზემოთ გვექნება მსგავსი რამ

Canvas

არის პანელი, რომელიც საშუალებას გაძლევთ მკაფიოდ განათავსოთ ელემენტები. Canvas ში განსაზღვრულია მიბმული თვისებები: Left, Right, Top, Bottom, რომლებიც შეიძლება გამოყენებულ იქნას პანელში პოზიციის განსასაზღვრად

<Window x:Class="App_for_blogpost_tutorials.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <Canvas Background="LightBlue">

        <Label Canvas.Top="30" Canvas.Left="20">დაბეჭდე აქ</Label>

        <TextBox Canvas.Top="30" Canvas.Left="120" Width="100" />

        <Button Canvas.Top="70" Canvas.Left="130" Content="დამაჭირე!"      Padding="5" />

    </Canvas>

</Window>

DockPanel

DockPanel ძალიან გავს Windows Forms ში dock ფუნქციას (მათთვის იქნება ნაცნობი ვისაც შეხება ჰქონია ამ ტექნოლოგიასთან). აქ შესაძლებელია იმ ფართის მითითება, სადაც შვილეული კონტროლები უნდა დალაგდეს. DockPanelს გააჩნია თვისება Dock, რომელთა დაყენებაც შესაძლებელია შვილეულ ელემენტებში დაკონფიგურდეს: Left, Right, Top, Bottom. მოცემულია მაგალითი, სხვადასხვა ფერების გამოყენებით, რაც უფრო აადვილებს გარჩევას

<Window x:Class="App_for_blogpost_tutorials.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <DockPanel>

        <Border Height="25" Background="red" DockPanel.Dock="Top">

            <TextBlock>მენიუ</TextBlock>

        </Border>

        <Border Height="25" Background="Blue" DockPanel.Dock="Top">

            <TextBlock>სამუშაო ხაზი</TextBlock>

        </Border>

        <Border Height="30" Background="Green" DockPanel.Dock="Bottom">

            <TextBlock>სტატუსი</TextBlock>

        </Border>

        <Border Height="80" Background="Yellow" DockPanel.Dock="Left">

            <TextBlock>მარცხენა მხარე</TextBlock>

        </Border>

        <Border Background="Azure">

            <TextBlock>კონტექსტის ადგილი</TextBlock>

        </Border>

    </DockPanel>

</Window>

Grid

Grid ის გამოყენებით შესაძლებელია კონტროლების დალაგება რიგებისა და სვეტების მიხედვით. ყველა სვეტისთვის შესაძლებელია ColumnDefinition ის განსაზღვრა. ყველა რიგისთვის შესაძლებელია RowDefinition ის განსაზღვრა. ყველა სვეტისათვის და რიგისთვის შესაძლებელია სიმაღლისა და სიგანის განსაზღვრა. ColumnDefinition ს გააჩნია Width თვისება, ხოლო RowDefinition ს გააჩნია Height თვისება. სიგანისა და სიმაღლის განსაზღვრა შესაძლებელია პიქსელებში, ინჩებში, სანტიმეტრებში ან წერტილებში, ან უბრალოდ Auto, რომ განისაზღვროს ზომები, კონტექსტის მიხედვით. ამ კონტეინერს ასევე შეუძლია „ვარსკვლავური“ ზომების იმპლემენტაცია. მაგალითისათვის ავიღოთ სამ სვეტიანი Grid კონტეინერი, რომლის პირველი სვეტის Width = “100”, მესამე სვეტის Width = “120”, ხოლო შუა სვეტის ზომა შეგვიძლია ასეც მივუთითოთ - Width = “*”, ვარსკვლავი იმას ნიშნავს, რომ რაც კი ადგილი დარჩა შეუძლია დაიკავოს ამ სვეტმა.

<Window x:Class="App_for_blogpost_tutorials.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="525">

    <Grid ShowGridLines="True">

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition />

            <RowDefinition />

            <RowDefinition />

        </Grid.RowDefinitions>

        <Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0"

            VerticalAlignment="Center" HorizontalAlignment="Center" Content="სათაური" />

        <Label Grid.Column="0" Grid.Row="1" VerticalAlignment="Center"

            Content="სახელი:" Margin="10" />

        <TextBox Grid.Column="1" Grid.Row="1" Width="100" Height="30" />

        <Label Grid.Column="0" Grid.Row="2" VerticalAlignment="Center"

            Content="გვარი:" Margin="10" />

        <TextBox Grid.Column="1" Grid.Row="2" Width="100" Height="30" />

    </Grid >

</Window>

კოდში Grid ის უკეთ დასანახად გავლებულია ხაზები, რომლებიც ჩვეულებრივ არ ჩანს ხოლმე.