在一個wrappanel中Silverlight縮放列表框項目

我創建了一個帶有平鋪數據模板的列表框。我現在想弄清楚的是，當鼠標懸停或選定的事件發生時，如何正確地將縮放效果應用於每個列表框項目，並使其在包裝面板中正確呈現。我目前已將動畫添加到ListBoxItemTemplate的視覺狀態。在一個wrappanel中Silverlight縮放列表框項目

幾個想法：當動畫被稱爲包裝面板內的瓷磚不重新定位，以允許正確查看縮放項目。我想讓包裝面板中的項目重新定位以允許縮放的項目可見。

另外我注意到，當縮放的項目超出了包裝面板的邊界時，是否還有一種方法可以在縮放約束到包裝面板的可視區域時保留項目？

代碼使用在搜索視圖

<Grid x:Name="LayoutRoot"> 
    <ListBox x:Name="ResultListBox" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      Background="{x:Null}" 
      BorderThickness="0" 
      HorizontalContentAlignment="Stretch" 
      ItemContainerStyle="{StaticResource TileListBoxItemStyle}" 
      ItemsPanel="{StaticResource ResultsItemsControlPanelTemplate}" 
      ItemsSource="{Binding SearchResults[0].Results}" 
      ScrollViewer.HorizontalScrollBarVisibility="Disabled"> 
     <ListBox.ItemTemplate> 

      <DataTemplate> 
       <formatter:TypeTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch" Margin="2.5"> 
        <!-- Person Template --> 
        <formatter:TypeTemplateSelector.PersonTemplate> 
         <DataTemplate> 
          <qr:ucTilePerson /> 
         </DataTemplate> 
        </formatter:TypeTemplateSelector.PersonTemplate> 

        <!-- Incident Template --> 
        <formatter:TypeTemplateSelector.IncidentTemplate> 
         <DataTemplate> 
          <qr:ucTileIncident /> 
         </DataTemplate> 
        </formatter:TypeTemplateSelector.IncidentTemplate> 

       </formatter:TypeTemplateSelector> 

      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 

</Grid>

ResultsItemsControlPanelTemplate在App.xaml中定義爲

 <ItemsPanelTemplate x:Key="ResultsItemsControlPanelTemplate"> 
     <toolkit:WrapPanel x:Name="wrapTile"/> 
    </ItemsPanelTemplate>

我將不勝感激上哪裏找提前感謝任何建議

當前結果圖片

enter image description here

來源

2011-07-27 rlcrews

渲染變換器在佈局發生後應用，它是Silverlight佈局引擎對於純粹的圖形化任務的知之甚少。你需要的是控制，當縮放實際上增加了它所需的大小，並導致Silverlight更新其佈局。

您需要的控件是Silverlight Toolkit的LayoutTransformer控件。

將您的每個瓷片的內容放在LayoutTransformer之內，並將ScaleTransform指定給它的LayoutTransform屬性。現在，您可以使用動畫來操作變換，並且隨着平鋪的增長，其他平鋪將會流動。

來源

2011-07-27 21:06:26 AnthonyWJones

謝謝安東尼這正是我正在尋找。問題：由於我正在使用列表框中的數據模板進行加載，因此我在哪裏添加LayoutTransformer？我試圖圍繞每個用戶控件包裝，但沒有看到任何更改？數據模板會影響到這一點嗎？ – rlcrews

@Randyc：你的故事板在哪裏？ – AnthonyWJones

感謝您指點我正確的方向。我發佈了一個後續更深入地瞭解佈局基本上我有視圖持有一個用戶控件（searchresultcollection.xaml）Searchresultcollection包含數據模板，它根據我的集合中返回的類型在列表視圖中加載適當的usercontrol （21個可能的回報）如果這不是正確的方法，我會很感激任何見解。 – rlcrews

通過這個工作我有我的用戶控件存儲在一個Listbox數據模板中，這也是項目中引用的userControl。我想我已經開始了部分解決方案，所以現在我需要繼續調整發生的事情。由於我使用一個DataTemplate我不得不對用戶控制的結合參考設置到Layouttrasnformation

<ListBox x:Name="ResultListBox" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch" 
      Background="{x:Null}" 
      BorderThickness="0" 
      HorizontalContentAlignment="Stretch" 
      ItemsPanel="{StaticResource ResultsItemsControlPanelTemplate}" 
      ItemContainerStyle="{StaticResource TileListBoxItemStyle}" 
      ItemsSource="{Binding SearchResults[0].Results}" 
      ScrollViewer.HorizontalScrollBarVisibility="Disabled">  
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <formatter:TypeTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch" Margin="2.5"> 
        <!-- Person Template --> 
        <formatter:TypeTemplateSelector.PersonTemplate> 
         <DataTemplate > 
          <layoutToolkit:LayoutTransformer x:Name="PersonTransformer"> 
            <layoutToolkit:LayoutTransformer.LayoutTransform> 
             <ScaleTransform x:Name="personScale"/> 
            </layoutToolkit:LayoutTransformer.LayoutTransform> 
             <qr:ucTilePerson MouseEnter="ucTilePerson_MouseEnter" Tag="{Binding ElementName=PersonTransformer}" /> 
           </layoutToolkit:LayoutTransformer> 
         </DataTemplate> 
        </formatter:TypeTemplateSelector.PersonTemplate>

//儘可編輯爲了簡潔

然後代碼內保持該列表框該用戶控件的後面予使用下列內容：

private void ucTilePerson_MouseEnter(object sender, MouseEventArgs e) 
    { 
     var ps = ((UserControl)sender).Tag as LayoutTransformer; 
     if (ps != null) 
     { 
      var transform = ps.LayoutTransform as ScaleTransform; 
      transform.ScaleX = (transform.ScaleX + 1.2); 
      transform.ScaleY = (transform.ScaleY + 1.2); 
      Dispatcher.BeginInvoke(() => { ps.ApplyLayoutTransform(); }); 
     }

我還是要調整該有的它似乎並不像我想的流體（我也必須設置鼠標離開的事件）。

不知道這是否是最合適的方法，我希望對備選方案有任何反饋意見。

再次感謝安東尼指出我在正確的方向

來源

2011-07-28 16:55:33 rlcrews

在一個wrappanel中Silverlight縮放列表框項目

回答

相關問題