Telerik RadTileList 控件的布局问题答案

【问题标题】：Layout issue with Telerik RadTileList controlTelerik RadTileList 控件的布局问题
【发布时间】：2014-05-30 05:57:16
【问题描述】：

虽然我已经就这个问题向 Telerik 提交了支持票，但我也在此处发布问题，希望有人可以提供解决方案：

RadTileList 控件在图块的顶部和底部添加了额外的填充。为了演示这一点，我创建了一个包含三个磁贴的简单 WPF 应用程序。该应用程序包含一个包含在红色边框内的 Telerik RadTileList 控件（以显示控件的开始和结束位置），并且 RadTileList 包含三个硬编码的 Telerik Tiles。其中两个是“Single”大小的瓷砖，另一个是“Double”。我想要做的是让瓷砖与控件的左上角对齐。

以下是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>

【问题讨论】：

标签： wpf telerik

【解决方案1】：

我找到了更好的解决方案。我试用了 DevExpress WPF TileLayoutControl。除了不允许用户选择图块之外，它几乎可以完成 Telerik TileListControl 所做的所有其他事情，等等。最重要的是，如果我将 Padding 属性设置为“0”，则图块将与左上角完美对齐。我想我现在开始成为 DevExpress 的粉丝了。

我很遗憾因为一个似乎没人想回答的问题放弃了我在 StackoverFlow 上的 100 分，但事后看来是 20/20。如果有人找到 Telerik 问题的解决方案，我将不胜感激。

【讨论】：

【解决方案2】：

Telerik 用 [有点] 有效的解决方案回答了我的问题。这是他们写的：

您可以尝试重置 TileListPanel 的 Padding - 默认情况下，我们将此值设置为顶部 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，看看这个解决方案中是否还有另一层。

【讨论】：

【解决方案3】：

我尝试使用布局模板无济于事，然后我设置 RadTileList 的高度。看起来 ItemsPanelTemplate:TileListPanel 的行为类似于 WrapPanel。一直拉伸到 MaxHeight。

如果您添加/删除或更改瓷砖的 TileType，您还需要设置不同的高度。

图片在这里：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>

【讨论】：

非常感谢您花时间和精力来研究这个问题。您的解决方案虽然不完美，但在某种程度上可行。我想我可能会奖励你赏金，尤其是因为你目前只有 1 个代表。
甜蜜。我之前使用的是 radtilelist，但现在我决定不使用它，主要是因为控件不会随屏幕调整大小。

【解决方案4】：

为您的RadTileList 创建一个DataTemplate，并在该模板中将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}">

【讨论】：

感谢您的回复，并感谢您指出 GroupTemplate（我以前从未注意到它），但这似乎仍然无法解决问题。
你必须有那个边框吗？尝试用网格替换它，看看会发生什么......
Dean，再次感谢您关注我。我在上面尝试了您的建议以删除边框，但仍然没有骰子。您有机会阅读我从 Telerik 粘贴的答案吗？他们的解决方案部分有效。
是的，但是如果您运行他们的演示，您会注意到他们的图块没有您遇到的布局问题，因此控件本身似乎没有问题...
K：这是真的，我相信这是因为它们有很多图块，并且它们的 RadTileList 控件设置为固定大小，而我的窗口调整大小。