Как я могу изменить размер пользовательского элемента управления silverlight 3 в зависимости от его содержимого? - PullRequest
Новая
       20

Как я могу изменить размер пользовательского элемента управления silverlight 3 в зависимости от его содержимого?

0 голосов
/ 28 июня 2009

Использование Silverlight 3 Я пытаюсь воссоздать визуализацию объекта класса, как показано на диаграмме классов Visual Studio. Однако мои объекты будут представлять объекты базы данных, а не определения классов. Я был частично успешным, как видно на следующих двух изображениях.

альтернативный текст http://img41.imageshack.us/img41/5669/tablestructurenotexpandb.png a http://img41.imageshack.us/img41/7634/tablestructurenotexpand.png

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

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

Но я не уверен, как бы я поступил так. Я не уверен, что использую элементы управления, которые более или менее подходят для автоматического изменения размера. Любая помощь приветствуется.

Вот XAML, который создает этот элемент управления. 

<UserControl x:Class="SchemaDesigner.TableBox2"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Border BorderThickness="1" BorderBrush="#FF716F6E" CornerRadius="10" Width="252" Height="202">  <!-- Height="202"-->
        <Canvas>
            <Canvas.Clip>
                <RectangleGeometry RadiusX="10" RadiusY="10" Rect="0,0,250,200"/>
            </Canvas.Clip>
            <StackPanel Width="250"  Background="White">
                <StackPanel Width="250" Height="45" Orientation="Vertical">
                    <StackPanel.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                            <GradientStop Color="#FFD3DCEF"  Offset="0.0" />
                            <GradientStop Color="#FFFFFFFF" Offset=" 1.0"/>
                        </LinearGradientBrush>
                    </StackPanel.Background>
                    <StackPanel Width="250" Orientation="Horizontal">
                        <StackPanel Width="210" Height="45" Orientation="Vertical">
                            <TextBlock Text="{Binding Name}" Width="190" HorizontalAlignment="Left" FontFamily="Verdana" Margin="10,10,0,0" VerticalAlignment="Top" FontWeight="Black" FontSize="12"/>
                            <TextBlock Text="{Binding Type}" Width="190" HorizontalAlignment="Left" FontFamily="Verdana" Margin="10,0,0,0" VerticalAlignment="Top" FontStyle="Italic"/>
                        </StackPanel>
                        <Button Width="20" Height="20" VerticalAlignment="Top" Margin="10" Content="^" FontFamily="Verdana" />
                    </StackPanel>
                </StackPanel>

                <ItemsControl x:Name="items" ItemsSource="{Binding Rows}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                                <StackPanel Width="250" Orientation="Horizontal">
                                    <Image Width="16" Height="16" VerticalAlignment="Center" Source="/SchemaDesigner;component/column.png"/>
                                    <TextBlock Text="{Binding ColumnName}" Width="100" Height="20"/>
                                    <TextBlock Text="{Binding ColumnType}" Width="130" Height="20"/>
                                </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

            </StackPanel>
        </Canvas>
    </Border>

</UserControl>

1 Ответ

1 голос
/ 29 июня 2009

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

Внесены следующие изменения:

  • Пользовательский элемент управления имеет явную высоту / ширину, которые я удалил.
  • Холст добавлялся только для обеспечения функции клипа, и в этом нет необходимости (не говоря уже о том, что для холста не указан размер, который может вызвать проблемы)
  • Настройки горизонтального и вертикального выравнивания специально установлены по центру, чтобы избежать растягивания содержимого по размеру экрана, оно будет соответствовать содержимому.
  • прямоугольник, обеспечивающий обрезку верхнего фона, чтобы избежать перезаписи границы, был установлен на высоту фона +10 (радиус), поэтому нижняя часть фона также не обрезается до кривой (а 10 сохраняет это в пределах разумной высоты.)
  • Я убрал высоту в элементе управления, это не требуется, но я предпочитаю, чтобы содержимое запрашивало нужную ему высоту вместо того, чтобы задавать произвольную высоту. / edit: если вы хотите, чтобы оно изменялось в зависимости от размера шрифта, это станет необходимым, вы не можете явно установить высоту, а также хотите, чтобы оно автоматически изменяло высоту в то же время

Создан фиктивный локальный класс с правильными свойствами / дочерней коллекцией и привязанными к нему, результаты выглядят так, как я думаю, вы хотите. Если вы хотите, чтобы нижняя часть синего фона также изгибалась, высота клипа стековой панели должна быть установлена ​​на 45.

Не забудьте переименовать класс обратно, моя версия была просто mainpage1.

надеюсь, что поможет

A. 

    <UserControl x:Class="SilverlightApplication1.MainPage"
                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"    
                 mc:Ignorable="d">

    <Border BorderThickness="1" BorderBrush="#FF716F6E" CornerRadius="10" VerticalAlignment="Center" HorizontalAlignment="Center">
        <StackPanel Width="250" Orientation="Vertical" VerticalAlignment="Center">
             <StackPanel Width="250" Height="45" Orientation="Vertical" >
                <StackPanel.Clip>
                   <RectangleGeometry RadiusX="10" RadiusY="10" Rect="0,0,250,55"/> 
                </StackPanel.Clip>
                    <StackPanel.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="#FFD3DCEF"  Offset="0.0" />
                        <GradientStop Color="#FFFFFFFF" Offset=" 1.0"/>
                    </LinearGradientBrush>
                </StackPanel.Background>
                <StackPanel Width="250" Orientation="Horizontal">
                    <StackPanel Width="210" Height="45" Orientation="Vertical">
                        <TextBlock Text="{Binding Name}" Width="190" HorizontalAlignment="Left" FontFamily="Verdana" Margin="10,10,0,0" VerticalAlignment="Top" FontWeight="Black" FontSize="12"/>
                        <TextBlock Text="{Binding Type}" Width="190" HorizontalAlignment="Left" FontFamily="Verdana" Margin="10,0,0,0" VerticalAlignment="Top" FontStyle="Italic"/>
                    </StackPanel>
                    <Button Width="20" Height="20" VerticalAlignment="Top" Margin="10" Content="^" FontFamily="Verdana" />
                </StackPanel>
            </StackPanel>
            <ItemsControl x:Name="items" ItemsSource="{Binding Rows}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Width="250" Orientation="Horizontal">
                            <Image Width="16" Height="16" VerticalAlignment="Center" Source="/SchemaDesigner;component/column.png"/>
                            <TextBlock Text="{Binding ColumnName}" Width="100" />
                            <TextBlock Text="{Binding ColumnType}" Width="130" />
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </Border>
</UserControl>
...