Нужны советы по компоновке WPF - PullRequest
Новая
       4

Нужны советы по компоновке WPF

4 голосов
/ 11 ноября 2010

Я пытаюсь смоделировать макет, отображаемый на этом изображении .

Если вы посмотрите, он имеет несколько текстовых полей / флажков / кнопок, пару диагональных элементов управления и еще один отдельный элемент управления (в красном контуре).

На нижнем снимке экрана показано, что я хотел бы, чтобы в этом отдельном элементе управления был установлен флажок.

Какие-нибудь советы о том, как выложить это и обработать эти диагональные части? Я пробовал просто вращать текстовые блоки с границами, но тогда границы остаются такими же прямоугольными, а не обрезанными, как на изображении. У меня также были некоторые проблемы с правильной позицией. Мне также нужно, чтобы ширина этих диагональных сечений была как-то привязана к части checkbox / textBox этого отдельного элемента управления в красной рамке.

Является ли мой единственный выбор для поворота текстовых блоков без полей и рисования линий с использованием контуров и для расширения ширины, связать его с каким-либо свойством моего отдельного элемента управления?

Спасибо за любой совет.

Ответы [ 3 ]

5 голосов
/ 11 ноября 2010

Это выглядело как забавный вызов. Попробуйте следующий XAML. Он будет автоматически регулировать размер столбцов по мере расширения содержимого. Ключ помещает некоторые элементы холста в сетку, чтобы позволить линиям границ перетекать в соседние ячейки. Это, конечно, может быть исправлено некоторыми стилями и будет немного хрупким, если вам нужно изменить размеры, но я думаю, что это демонстрирует подход:

alt text

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ButtonStyleTestApp.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">   

<Grid x:Name="LayoutRoot" Background="#FF44494D" SnapsToDevicePixels="True">
    <Grid.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </Grid.Resources>

    <Grid Background="#DDD">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition MinWidth="30" Width="Auto"/>
            <ColumnDefinition MinWidth="30" Width="Auto"/>
            <ColumnDefinition MinWidth="30" Width="Auto"/>
            <ColumnDefinition MinWidth="30" Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/>
            <RowDefinition Height="30"/> 
        </Grid.RowDefinitions>

        <Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="0" Grid.Row="1">
            <TextBox Margin="10 5" VerticalAlignment="Center"/>         
        </Border>

        <Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="1" Grid.Row="1">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                <CheckBox x:Name="CheckBox1" Margin="5" VerticalAlignment="Center"></CheckBox>
                <TextBox Visibility="{Binding IsChecked, ElementName=CheckBox1, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
            </StackPanel>               
        </Border>

        <Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="2" Grid.Row="1">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                <CheckBox x:Name="CheckBox2" Margin="5" VerticalAlignment="Center"></CheckBox>
                <TextBox Visibility="{Binding IsChecked, ElementName=CheckBox2, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
            </StackPanel>               
        </Border>

        <Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="3" Grid.Row="1">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                <CheckBox x:Name="CheckBox3" Margin="5" VerticalAlignment="Center"></CheckBox>
                <TextBox Visibility="{Binding IsChecked, ElementName=CheckBox3, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
            </StackPanel>               
        </Border>

        <Border BorderThickness="1" BorderBrush="#888" Grid.Column="4" Grid.Row="1">
            <Button Margin="3" FontSize="10" VerticalAlignment="Center" Width="40">Click</Button>           
        </Border>           

        <Canvas Grid.Column="1">
            <Grid ClipToBounds="False" Canvas.Top="30">
                <Border 
                BorderBrush="#888" 
                BorderThickness="0 1 0 0" 
                RenderTransformOrigin="0 0" 
                Height="20"
                Width="100" 
                Margin="0 0 0 -80">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="-45"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Border.RenderTransform>
            <TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
                Testing 1
            </TextBlock>
        </Border>
        </Grid>
        </Canvas>

        <Canvas Grid.Column="2">
            <Grid ClipToBounds="False" Canvas.Top="30">
                <Border 
                BorderBrush="#666" 
                BorderThickness="0 1 0 0" 
                RenderTransformOrigin="0 0" 
                Height="20"
                Width="100" 
                Margin="0 0 0 -80">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="-45"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Border.RenderTransform>
            <TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
                Testing 2
            </TextBlock>
        </Border>
        </Grid>
        </Canvas>

        <Canvas Grid.Column="3">
            <Grid ClipToBounds="False" Canvas.Top="30">
                <Border 
                BorderBrush="#666" 
                BorderThickness="0 1 0 0" 
                RenderTransformOrigin="0 0" 
                Height="20"
                Width="100" 
                Margin="0 0 0 -80">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="-45"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Border.RenderTransform>
            <TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
                Testing 3
            </TextBlock>
        </Border>
        </Grid>
        </Canvas>

        <Canvas Grid.Column="4">
            <Grid ClipToBounds="False" Canvas.Top="30">
                <Border 
                BorderBrush="#666" 
                BorderThickness="0 1 0 0" 
                RenderTransformOrigin="0 0" 
                Height="20"
                Width="100" 
                Margin="0 0 0 -80">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="-45"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Border.RenderTransform>
        </Border>
        </Grid>
        </Canvas>           
    </Grid>     
</Grid>
</Window>

Надеюсь, это поможет.

0 голосов
/ 11 ноября 2010

Что касается обработки диагональных элементов, попробуйте поместить TextBlock в Border и трансформировать границу с помощью RotateTransform и SkewTransform. Это должно помочь вам начать: 

<Grid HorizontalAlignment="Left" Height="100" Margin="64,60.5,0,0" VerticalAlignment="Top" Width="100" Background="Blue">
        <Border BorderBrush="Black" BorderThickness="1" Margin="20,25.5,20.5,41.5" RenderTransformOrigin="0.5,0.5">
            <Border.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform AngleY="20"/>
                    <RotateTransform Angle="90"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Border.RenderTransform>
            <TextBlock TextWrapping="Wrap" Text="TextBlock" RenderTransformOrigin="0.5,0.5">
                <TextBlock.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="180"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Border>
    </Grid>
0 голосов
/ 11 ноября 2010

Это определенно выполнимо с границами и текстовыми блоками, но это утомительно.

вам придется много играть с отрицательными полями.

Вы можете работать с изображениями вместо границ, но вывсе еще нужны текстовые блоки под углом, используя rendertransform

Я бы определенно подошел к этому, используя сетку с большим количеством столбцов ширины Auto, сначала разместив простые компоненты, а затем хитрые и выполнив поля rotations + neg..

HTH.

...