如何根據其內容自動調整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保持它在一個合理的高度。）
• 我拿出了項目控制的高度，這不是必需的，但我更喜歡內容要求他們需要的高度，而不是給予任意的高度。 /編輯：假設你希望它根據字體大小進行更改，這將變得必要，你不能明確地設置高度，並且也希望它在同一時間/編輯時自動調整高度。

創建一個具有正確屬性/子集合的虛擬本地類並綁定它，結果看起來像我認爲你想要的。如果你想在藍色的背景也曲線的底部，StackPanel的剪輯的高度應設置爲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>