在Silverlight中創建帶有重複元素的XAML邊框的正確方法是什麼？

Question

我正在嘗試創建一個帶有藍色背景的邊框並重復圈子。作爲一個例子：

對於垂直部分，我使用的在網格的垂直的StackPanel。在ControlTemplate中聲明一個圓圈（重疊一個藍色的Rectangle）。爲了產生重複，我複製了一堆ContentControls，每個ContentControl都指向我的ControlTemplate。

例如：

<StackPanel 
    Grid.Row="0" 
    Grid.RowSpan="3" 
    Grid.Column="0" 
    Orientation="Vertical" 
    > 
    <ContentControl 
     attachedProperties:LightEllipseAttachedProperties.LightState="{Binding ElementName=PhoneApplicationPage, Path=GameController.Instance.Lights}" 
     Template="{StaticResource LightbulbTemplate}" 
     /> 

    **Repeat N times** 

    <ContentControl 
     attachedProperties:LightEllipseAttachedProperties.LightState="{Binding ElementName=PhoneApplicationPage, Path=GameController.Instance.Lights}" 
     Template="{StaticResource LightbulbTemplate}" 
     /> 
</StackPanel> 


<ControlTemplate 
    x:Key="LightbulbTemplate" 
    > 
    <Grid> 
     <VisualStateManager.VisualStateGroups> 

     </VisualStateManager.VisualStateGroups> 
     <Rectangle 
      Fill="#3300CC" 
      Height="15" 
      Width="15" 
      /> 
     <Ellipse 
      x:Name="LightEllipse" 
      Height="8" 
      Width="8" 
      > 
      <Ellipse.Fill> 
       <SolidColorBrush /> 
      </Ellipse.Fill> 
     </Ellipse> 
    </Grid> 
</ControlTemplate> 

我的問題：是否有更好的方法來創建使用Silverlight重複元素的邊界？也許Border具有平鋪功能，因此它會重複ControlTemplate本身，而不是添加單獨的ContentControls？

Answer 1

如果你想建立一個這樣的形狀簡單的方法，你可以嘗試使用Rectangle使用自定義StrokeDashArray：

它是由本XAML代碼生成：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Height="200"> 
    <Rectangle StrokeThickness="14" StrokeDashCap="Round" Stroke="#FF00B2E6" /> 
    <Rectangle StrokeDashArray="0.1 1.3" 
      StrokeThickness="10" StrokeDashCap="Round" Margin=".9" > 
     <Rectangle.Stroke> 
      <SolidColorBrush Color="#BFFF0606"/> 
     </Rectangle.Stroke> 
    </Rectangle> 
</Grid> 

的XAML使用2米的矩形。一個是「背景」顏色，另一個是圈子。通過試驗StrokeDashArray值，可以控制短劃線的形狀和到下一短劃線的距離。通過使用Round短劃線帽和小短劃線尺寸（.1），它會生成看起來近乎圓形的形狀。您可以嘗試使用Rectangle s，Margin等的位置來控制最終外觀。

使用這種技術的好處在於它在手機上繪製形狀時非常高效，它會根據需要自動調整內容大小。

Answer 2

我建議創建一個單獨的UserControl。圈數可以是UserControl的Dependencyproperty。然後，您可以使用ItemsControl來重複這些圈子。

Answer 3

我有一個稍微不同的建議（不僅在XAML）：

製作背景的邊界。我已經成功地做這樣的事情：

它的工作原理相當不錯，並自動適應到的UIElement的大小，思想可能需要一些時間（不要太多），加載（但是當你開始可以準備好應用程序，然後重用）。我已經通過WritableBitmap做到了 - 只是呈現許多要素（adventage是，任何元素可以使用 - 星，tringles，甚至其他圖片），我需要：

private WriteableBitmap CreateBorderBrush(int width, int height) 
{ 
    Rectangle firstBrush = new Rectangle(); 
    firstBrush.Width = 15; 
    firstBrush.Height = 15; 
    firstBrush.Fill = new SolidColorBrush(Colors.Blue); 
    Ellipse secondBrush = new Ellipse(); 
    secondBrush.Width = 8; 
    secondBrush.Height = 8; 
    secondBrush.Fill = new SolidColorBrush(Colors.Orange); 
    int dimensionX = width - width % 15; 
    int dimensionY = height - height % 15; 
    WriteableBitmap bitmapToBrush = new WriteableBitmap(dimensionX, dimensionY); 
    for (int i = 0; i < width/15; i++) 
    { 
     bitmapToBrush.Render(firstBrush, new TranslateTransform() { X = i * 15, Y = 0 }); 
     bitmapToBrush.Render(secondBrush, new TranslateTransform() { X = i * 15 + 3, Y = 3 }); 
    } 
    for (int i = 1; i < height/15 - 1; i++) 
    { 
     bitmapToBrush.Render(firstBrush, new TranslateTransform() { X = 0, Y = i * 15 }); 
     bitmapToBrush.Render(secondBrush, new TranslateTransform() { X = 3, Y = i * 15 + 3 }); 
     bitmapToBrush.Render(firstBrush, new TranslateTransform() { X = dimensionX - 15, Y = i * 15 }); 
     bitmapToBrush.Render(secondBrush, new TranslateTransform() { X = dimensionX - 15 + 3, Y = i * 15 + 3 }); 
    } 
    for (int i = 0; i < width/15; i++) 
    { 
     bitmapToBrush.Render(firstBrush, new TranslateTransform() { X = i * 15, Y = dimensionY - 15 }); 
     bitmapToBrush.Render(secondBrush, new TranslateTransform() { X = i * 15 + 3, Y = dimensionY - 15 + 3 }); 
    } 
    bitmapToBrush.Invalidate(); 
    return bitmapToBrush; 
} 

在構造函數中的MainPage我用它是這樣的：

this.Loaded += (s, e) => 
{ 
    myGrid.Background = new ImageBrush() { ImageSource = CreateBorderBrush((int)myGrid.ActualWidth, (int)myGrid.ActualHeight) }; 
}; 

而XAML代碼：

<Grid Name="myGrid" Grid.Row="0" Width="300" Height="200"> 
    <Button x:Name="first" Content="Button" Width="150" Height="100"/> 
</Grid>