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