problema layout con il controllo RadTileList Telerik

Question

Mentre io ho già presentato una richiesta di assistenza per Telerik su questo tema, sono anche la pubblicazione della domanda qui sperando che qualcuno può avere una soluzione:

Il controllo RadTileList è l'aggiunta di imbottitura extra nella parte superiore e inferiore delle tessere. Per dimostrarlo, ho creato una semplice applicazione WPF con tre tessere. L'app è costituita da un controllo Telerik RadTileList contenuto all'interno di un bordo rosso (per mostrare dove inizia e termina il controllo) e RadTileList contiene tre tessere Telerik con hard disk. Due di questi sono i riquadri "Single" e l'altro è un "Double". Quello che sto cercando di fare è ottenere le tessere per allineare all'angolo in alto a sinistra del controllo.

Quello che segue è il codice 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

Ho trovato una soluzione migliore. Ho provato DevExpress WPF TileLayoutControl. Con l'eccezione di non consentire all'utente di selezionare una tessera, fa esattamente tutto ciò che fa Telerik TileListControl, e altro ancora. Ancora più importante, se imposto la proprietà Padding su "0", le tessere si allineano perfettamente all'angolo in alto a sinistra.Penso che sto iniziando a diventare più fan di DevExpress ora.

Mi sto pentendo di aver rinunciato a 100 punti del mio rappresentante su StackoverFlow per una domanda a cui nessuno sembra voler rispondere, ma il senno di poi è 20/20. Se qualcuno trova una soluzione alla questione Telerik, te ne sarò grato.

Answer 2

Creare una DataTemplate per il vostro RadTileList e in quel modello di set VerticalAlignment proprietà 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 risposto alla mia domanda con una soluzione che [in qualche modo] funziona S. Ecco cosa hanno scritto:

Si può provare a reimpostare il Padding di TileListPanel - per impostazione predefinita si imposta questo valore a 30 pixel in alto per la funzionalità di raggruppamento di questo componente. Direttamente impostare questo valore a 0 azzera la distanza sulla parte superiore, come illustrato di seguito:

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

Inoltre, vi sto incollando il modello completo con questa modifica per 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> 

* Per favore, fai un tentativo e facci sapere come possiamo aiutarti ulteriormente.

saluti, Vanya Pavlova Telerik *

Ecco i risultati:

Quando ho lanciare l'applicazione:

Se a ridimensionare sempre leggermente:

Se lo ridimensiono un valore significativo importo:

Come mostrato nell'immagine sopra, le piastrelle non rimangono sistematicamente posizionate in alto a sinistra. Per ora, inserirò questo codice nella mia app, ma tornerò di nuovo su Telerik e vedrò se c'è un altro livello in questa soluzione.

Answer 4

Ho provato a giocare con i modelli di layout senza alcun risultato, quindi ho impostato l'altezza di RadTileList. Sembra che ItemsPanelTemplate: TileListPanel si comporta come un WrapPanel. Si estende fino a MaxHeight.

È inoltre necessario impostare un'altezza diversa se si aggiunge/rimuove o modifica il tipo di tile delle tessere.

Pic è qui: 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>