Vấn đề bố trí với điều khiển Telerik RadTileList

Question

Trong khi tôi đã gửi một vé hỗ trợ cho Telerik về vấn đề này, tôi cũng đăng câu hỏi ở đây hy vọng ai đó có thể có giải pháp:

Điều khiển RadTileList đang thêm phần đệm thừa ở trên cùng và ở dưới cùng của gạch. Để chứng minh điều này, tôi đã tạo một ứng dụng WPF đơn giản có ba lát. Ứng dụng này bao gồm một điều khiển Telerik RadTileList chứa trong một đường viền màu đỏ (để hiển thị nơi điều khiển bắt đầu và kết thúc), và RadTileList chứa ba Gạch Telerik được mã hóa cứng. Hai trong số đó là các ô có kích thước "Đơn" và một cái còn lại là "Đôi". Những gì tôi đang cố gắng làm là lấy các ô xếp thẳng hàng với góc trên bên trái của điều khiển.

Sau đây là 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

Tôi đã tìm thấy giải pháp tốt hơn. Tôi đã thử DevExpress WPF TileLayoutControl. Ngoại trừ việc không cho phép người dùng chọn một ô, nó chỉ làm mọi thứ khác mà Telerik TileListControl thực hiện và hơn thế nữa. Quan trọng nhất, nếu tôi đặt thuộc tính Padding là "0", các ô xếp hoàn toàn thẳng hàng với góc trên bên trái.Tôi nghĩ rằng tôi bắt đầu trở thành một fan hâm mộ DevExpress hơn bây giờ.

Tôi đang hối hận khi từ bỏ 100 điểm đại diện của mình trên StackoverFlow cho một câu hỏi mà không ai có vẻ muốn trả lời, nhưng, nhận thức là 20/20. Nếu ai đó tìm ra giải pháp cho vấn đề Telerik, tôi sẽ biết ơn.

Answer 2

Tạo một DataTemplate cho RadTileList của bạn và trong mẫu mà thiết VerticalAlignment tài sản để 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 trả lời cho câu hỏi của tôi với một giải pháp mà [phần nào] làm việc S. Đây là những gì họ đã viết:

Bạn có thể thử đặt lại Padding của TileListPanel - theo mặc định, chúng tôi đặt giá trị này là 30 pixel ở trên cùng cho chức năng nhóm của thành phần này. Trực tiếp thiết lập giá trị này về 0 sẽ thiết lập lại khoảng cách trên đầu, như hình dưới đây:

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

Ngoài ra, tôi đang dán bạn toàn bộ mẫu với sửa đổi này cho 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> 

* Vui lòng thử và cho chúng tôi biết cách chúng tôi có thể hỗ trợ thêm cho bạn.

Kính trọng, Vanya Pavlova Telerik *

Dưới đây là kết quả:

Khi tôi lần đầu tiên khởi động ứng dụng:

Nếu tôi thay đổi kích thước bao giờ nên hơi:

Nếu tôi đổi kích thước số tiền:

Như được hiển thị trong hình trên, các ô không nhất quán luôn được đặt ở phía trên bên trái. Bây giờ, tôi sẽ kết hợp mã này vào ứng dụng của tôi, nhưng tôi sẽ theo dõi lại với Telerik và xem có một lớp nào khác trong giải pháp này hay không.

Answer 4

Tôi đã thử phát các mẫu bố cục không có lịch phát sóng, sau đó tôi đặt chiều cao của RadTileList. Nó trông giống như ItemsPanelTemplate: TileListPanel hoạt động giống như một WrapPanel. Kéo dài cho đến khi MaxHeight.

Bạn cũng sẽ cần phải đặt chiều cao khác nếu bạn thêm/xóa hoặc thay đổi TileType của ô.

Pic là ở đây: 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>