Question

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

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

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

Screenshot of test app

Answer 1

我找到了更好的解决方案。我尝试了DevExpress WPF TileLayoutControl。除了不允许用户选择图块之外，它还可以完成Telerik TileListControl所做的所有其他操作，以及更多功能。最重要的是，如果我将Padding属性设置为“0”，则瓷砖将完全对齐左上角。我想我现在开始变得更像是一个DevExpress粉丝了。

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

Answer 2

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>

*请试一试，让我们知道我们如何进一步为您提供帮助。

此致 Vanya Pavlova Telerik *

以下是结果：

首次启动应用时： Here is what the screen looks like when I first launch it:

如果我稍微调整它的大小： If I resize it ever so slightly

如果我调整了大量的话： If I resize it a significant amount

如上图所示，瓷砖不会始终保持定位在左上角。现在，我将把这段代码合并到我的应用程序中，但是我将再次跟进Telerik，看看这个解决方案中是否还有另一层。

Answer 3

我尝试使用布局模板无济于事，然后我设置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>

Answer 4

为您的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}">

Telerik RadTileList控件的布局问题

4 个答案: