如何根据其内容自动调整 Silverlight 3 用户控件的大小？

Question

使用 Silverlight 3 我正在尝试重新创建在 Visual Studio 的类图中看到的类对象可视化。但是，我的对象将代表数据库对象而不是类定义。如下两张图片所示，我已经部分成功了。

alt text http://img41.imageshack.us/img41/5669/tablestructurenotexpandb.pnga 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>

Answer 1

我浏览了代码，有很多地方明确设置了高度，这会干扰布局计算。

所做的更改如下：

• 用户控件具有明确的高度/宽度，我已将其删除。
• 添加画布只是为了提供剪辑功能，没有必要（更不用说画布没有指定大小会导致问题）
• 水平和垂直对齐设置专门设置为居中以避免它拉伸内容以适应屏幕，它将适合内容。
• 为顶部背景提供剪裁以避免覆盖边框的矩形已设置为背景的高度 +10（半径），因此背景的底部也不会被剪裁为曲线（并且 10 保持它在合理的高度内。）
• 我在项目控件中取出了高度，这不是必需的，但我更喜欢内容询问他们需要的高度，而不是给定任意高度。 /edit ：如果您希望它根据字体大小进行更改，这将是必要的，您不能显式设置高度，并且还希望它同时自动调整高度 /edit。

创建了一个具有正确属性/子集合并绑定到它的虚拟本地类，结果看起来像我认为你想要的。如果您希望蓝色背景的底部也弯曲，则堆栈面板剪辑的高度应设置为 45。

别忘了重命名这个类，我的版本只是 mainpage1。

希望对你有帮助

一个。

    <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>