與Telerik的RadTileList控制佈局問題

Question

雖然我已經提交了支持票Telerik的關於這個問題，我也在這裏張貼的問題希望有人可以有一個解決方案：

的RadTileList控制添加微胖在瓷磚的頂部和底部。爲了演示這一點，我創建了一個簡單的WPF應用程序，它有三個圖塊。該應用程序由一個包含在紅色邊框內的Telerik RadTileList控件組成（以顯示控件的開始和結束位置），RadTileList包含三個硬編碼的Telerik Tiles。其中兩個是「單」大小的瓷磚，另一個是「雙」。我想要做的是讓瓷磚對齊到控件的左上角。

以下是XAML：

<Window x:Class="TelerikRadTileListIssue.MainWindow" 
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 
       Title="MainWindow" Height="522" Width="559"> 

    <Border BorderBrush="Red" BorderThickness="2"> 
     <telerik:RadTileList > 
      <telerik:RadTileList.Items> 
       <telerik:Tile TileType="Single"> 
        <TextBlock>Tile 1</TextBlock> 
       </telerik:Tile> 

       <telerik:Tile TileType="Double"> 
        <TextBlock>Tile 2</TextBlock> 
       </telerik:Tile> 

       <telerik:Tile TileType="Single"> 
        <TextBlock>Tile 3</TextBlock> 
       </telerik:Tile> 

      </telerik:RadTileList.Items> 
     </telerik:RadTileList> 

    </Border> 
</Window> 

Answer 1

我找到了更好的解決方案。我嘗試了DevExpress WPF TileLayoutControl。除了不允許用戶選擇一個圖塊之外，它可以完成Telerik TileListControl所做的其他任何操作，等等。最重要的是，如果我將「填充」屬性設置爲「0」，則瓷磚完全與左上角對齊。我想我現在開始變得更像DevExpress的粉絲。

我很遺憾放棄了我在StackoverFlow上的代表100分，這個問題似乎沒有人想回答，但事後看來是20/20。如果有人找到Telerik問題的解決方案，我將不勝感激。

Answer 2

創建DataTemplate爲您RadTileList並在模板中設置VerticalAlignment屬性Top ...

<DataTemplate x:Key="GroupTemplate"> 
    <TextBlock Text="{Binding Header}" 
     FontSize="20" 
     FontFamily="Segoe UI" 
     Margin="10"    
     VerticalAlignment="Top" 
     HorizontalAlignment="Left"/> 
</DataTemplate> 

<telerik:RadTileList GroupTemplate="{StaticResource GroupTemplate}"> 

Answer 3

Telerik的迴應以我的問題與[有點]的解決方案秒。這裏是他們寫的東西：

您可以嘗試重置TileListPanel的填充 - 默認情況下，我們在上面這個組件的分組功能，將該值設置爲30個像素。該值直接設置爲0，將重置頂部的距離，如下圖所示：

<Setter Property="ItemsPanel"> 
       <Setter.Value> 
        <ItemsPanelTemplate> 
         <telerik:TileListPanel Padding="0" AllowDrop="True" Background="Transparent" CanHorizontallyScroll="True" CanVerticallyScroll="False" IsItemsHost="True" telerik:ScrollingSettingsBehavior.IsEnabled="True" telerik:ScrollingSettingsBehavior.ScrollStepTime="0:0:0.05" ScrollOwner="{x:Null}" telerik:ScrollingSettingsBehavior.ScrollStep="24" telerik:ScrollingSettingsBehavior.ScrollAreaPadding="200"/> 
        </ItemsPanelTemplate> 
       </Setter.Value> 
      </Setter> 

此外，我貼你這個修改爲RadTileList完整模板：

<Style x:Key="RadTileListStyle1" TargetType="{x:Type telerik:RadTileList}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type telerik:RadTileList}"> 
         <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
          <StackPanel Orientation="Horizontal"> 
           <ContentControl x:Name="PART_PanoramaBackground" ClipToBounds="True" Content="{TemplateBinding PanoramaBackground}" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
          </StackPanel> 
          <ScrollViewer x:Name="PART_ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CanContentScroll="True" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Margin="0" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="Hidden"> 
           <telerik:StyleManager.Theme> 
            <telerik:Office_BlackTheme/> 
           </telerik:StyleManager.Theme> 
           <ItemsPresenter/> 
          </ScrollViewer> 
          <ContentPresenter x:Name="dragVisualPlaceholder" HorizontalAlignment="Stretch" Visibility="Collapsed" VerticalAlignment="Stretch"/> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="ItemsPanel"> 
       <Setter.Value> 
        <ItemsPanelTemplate> 
         <telerik:TileListPanel Padding="0" AllowDrop="True" Background="Transparent" CanHorizontallyScroll="True" CanVerticallyScroll="False" IsItemsHost="True" telerik:ScrollingSettingsBehavior.IsEnabled="True" telerik:ScrollingSettingsBehavior.ScrollStepTime="0:0:0.05" ScrollOwner="{x:Null}" telerik:ScrollingSettingsBehavior.ScrollStep="24" telerik:ScrollingSettingsBehavior.ScrollAreaPadding="200"/> 
        </ItemsPanelTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="GroupTemplate"> 
       <Setter.Value> 
        <DataTemplate> 
         <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> 
        </DataTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="SnapsToDevicePixels" Value="True"/> 
     </Style> 

*請嘗試一下，讓我們知道我們如何能夠進一步提供幫助。

問候， 萬尼亞帕夫洛娃 Telerik的*

下面是結果：

當我第一次啓動該應用程序：

如果我調整即使是非常輕微：

如果我調整它的大小金額：

如上圖所示，瓷磚並不總是保持位於左上方。現在，我將把這些代碼合併到我的應用程序中，但我會再次跟進Telerik，看看在這個解決方案中是否有另一個層。

Answer 4

我試着玩佈局模板無濟於事， 然後我設置RadTileList的高度。它看起來像ItemsPanelTemplate：TileListPanel的行爲就像一個WrapPanel。伸展自己，直到MaxHeight。

如果添加/刪除或更改切片的TileType，則還需要設置不同的高度。

PIC是這裏：LayoutIssue.jpg

<Window x:Class="WpfApplication2.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 
    Title="MainWindow" > 
<Window.Resources> 
    <DataTemplate x:Key="DeptMapsTileGroupTemplate"> 
     <TextBlock Margin="0" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top" 
        FontFamily="Segoe UI" 
        FontSize="28" 
        Foreground="Black" 
        Text="{Binding Header}" /> 

    </DataTemplate> 
    <telerik:TileGroup x:Key="tilegroup" 
         DisplayIndex="0" 
         Header="Group" /> 
</Window.Resources> 
<Grid VerticalAlignment="Top"> 
    <telerik:RadTileList GroupTemplate="{StaticResource DeptMapsTileGroupTemplate}" Height="400"> 
     <telerik:RadTileList.Items> 
      <telerik:Tile TileType="Single" Group="{StaticResource tilegroup}"> 
       <TextBlock>Tile 1</TextBlock> 
      </telerik:Tile> 

      <telerik:Tile TileType="Double" Group="{StaticResource tilegroup}"> 
       <TextBlock>Tile 2</TextBlock> 
      </telerik:Tile> 

      <telerik:Tile TileType="Single" Group="{StaticResource tilegroup}"> 
       <TextBlock>Tile 3</TextBlock> 
      </telerik:Tile> 

     </telerik:RadTileList.Items> 
    </telerik:RadTileList> 
</Grid>