2012-03-08 47 views
2

我有有,因爲它的ItemsPanel畫布一個ItemsControl,該項目是簡單邊框,邊框的細節是從視圖模型數據綁定,如X,Y寬度,高度數據,顏色等。我很快意識到,即使我可以將大小和顏色等大部分數據綁定到邊框項目本身,我必須綁定ItemsControl容器樣式中的點數據和ZIndex,我相信這是因爲這些屬性僅適用於ItemContainer是一個ContentPresenter:在觸發組Z-索引在父內容呈現

<ItemsControl.ItemContainerStyle> 
     <Style> 
      <Setter Property="Canvas.Left" Value="{Binding Metrics.Ordinate.X}"/> 
      <Setter Property="Canvas.Top" Value="{Binding Metrics.Ordinate.Y}"/> 
      <Setter Property="Canvas.ZIndex" Value="{Binding ZIndex}"/> 
     </Style> 
</ItemsControl.ItemContainerStyle> 

一切都一直工作到需要時爲止。當用戶懸停在邊框上時,我在鼠標上使用了一個觸發器來更改背景顏色,但由於UI已經如此依賴顏色,我們決定爲了懸停,我們希望邊框的尺寸增大。所以我增加了一個尺度變換來代替:

<Trigger Property="IsMouseOver" Value="True"> 
    <!--<Setter Property="Background" Value="{Binding SelectedTemplate.StandardBrush}"></Setter>--> 
     <Setter Property="LayoutTransform"> 
       <Setter.Value> 
        <ScaleTransform ScaleX="1.5" ScaleY="1.5"/> 
       </Setter.Value> 
      </Setter> 
</Trigger> 

現在的問題是,我需要增加單個邊框的Z-索引在觸發器以及讓因爲它的增長就不會被其附近的老鄉項目裁剪。我正在搜索如何在觸發器中設置XAML中的父項(ContentPresenter),並遇到了this。這看起來很完美,但內容展示者沒有Name來引用它,它是一個重複的控件,我無法理解我如何在XAML中引用它。

這是可能觸發內還是我最好找一個不同的方法,無論是單獨在XAML或者一個改變我的ItemsControl一個不依賴?

非常感謝提前。

保羅

編輯

添加面板模板:

<ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <local:AutoSizeCanvas/> 
      </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

AutoCanvas是一個自定義的控制從畫布將覆蓋措施覆蓋的導出所以打球過着的ScrollViewer內,這是標準畫布的唯一區別。

編輯

我想補充的是,我使用的綁定項數據模板的一些邊界需要包含在其中稍有不同的項目,大衛目前的答案下面沒有工作,在鼠標懸停在Z-索引是問題在於所有懸停的項目都增加了ZIndex,所以如果鼠標移過一個本來意味着在後面的項目,那麼它會被提升到頂部,這看起來也很慢。該解決方案確實有效,但並不完全適用於這種情況,因爲它對所有項目進行全局設置,而不僅僅是需要觸發器的一種邊界類型。實質上,我有一個座位計劃,我從另一個應用程序獲取可視數據,並且必須按原樣使用它。該計劃有區域,區塊,排和座位,只是我希望觸發器發生的位置。

希望這是明確的。

+0

您可以加入ItemsControl的的模板? (特別是ItemsPanelTemplate,以瞭解如何設置Canvas作爲項目演示者。)以及管理添加項目的代碼(如果可以的話)。 – David 2012-03-08 10:18:00

+0

@大衛剛剛添加了面板模板。 – 2012-03-08 10:26:06

+0

好吧,我實際上是在AutoSizeCanvas實現之後。 (我試圖重現你的問題,但使用畫布作爲itemsPresenter是非常罕見的,需要相當多的代碼才能運行。有一件很重要的事情: - /) – David 2012-03-08 10:41:11

回答

1

你確定你需要的ContentPresenter的Z-索引中增加,並且不僅僅是邊框的Z-索引?

如果是這樣,那麼您沒有多少選項。我能看到的最好的是直接以itemsPresenter的風格設置觸發器。這樣,您就不必試圖找到邊界的父(至極,我認爲是不可能做到的只是在XAML反正)

所以你最終的東西是這樣的:

<ItemsControl.ItemContainerStyle> 
    <Style> 
     <Setter Property="Canvas.Left" Value="{Binding Metrics.Ordinate.X}"/> 
     <Setter Property="Canvas.Top" Value="{Binding Metrics.Ordinate.Y}"/> 
     <Setter Property="Canvas.ZIndex" Value="{Binding ZIndex}"/> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter Property="Canvas.ZIndex" Value="1000"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
</ItemsControl.ItemContainerStyle> 
+1

我以爲是一樣的,它不工作,我只是試圖 – Jonas 2012-03-08 10:09:10

+0

arf ...我沒有真正測試過這個。我會測試並嘗試解決這個問題。 – David 2012-03-08 10:10:16

+0

感謝您的建議,我嘗試過,但無法構建,因爲樣式沒有鼠標的觸發屬性。 – 2012-03-08 10:24:14

0

大衛在提供額外的細節之前,我的原始問題的答案是正確的,並且是一個非常好的答案,可悲的是,它並不適用於我的特殊情況。

我設法後面解決代碼問題對我的DataTemplate邊界:

的XAML爲模板:

<DataTemplate DataType="{x:Type vm:Seat}"> 
    <Border CornerRadius="3" Width="{Binding Metrics.Size.Width}" Height="{Binding Metrics.Size.Height}" BorderThickness="2" MouseEnter="MouseEnter" MouseLeave="MouseLeave"> 
     <Border.RenderTransform> 
      <ScaleTransform x:Name="ZoomTransform" ScaleX="1" ScaleY="1"/> 
     </Border.RenderTransform> 
     <Border.InputBindings> 
      <MouseBinding Gesture="LeftClick" Command="{Binding LeftClickCommand}"/> 
      <MouseBinding Gesture="RightClick" Command="{Binding RightClickCommand}"/> 
     </Border.InputBindings> 
     <Border.Style> 
      <Style TargetType="{x:Type Border}"> 
       <Setter Property="BorderBrush" Value="{Binding PriceBorderColour}"></Setter> 
       <Setter Property="Background" Value="{Binding Template.StandardBrush}"></Setter> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding IsSelected}" Value="True"> 
         <Setter Property="Background" Value="{Binding SelectedTemplate.StandardBrush}"/> 
        </DataTrigger> 
        <MultiDataTrigger> 
         <MultiDataTrigger.Conditions> 
          <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsMouseOver}" Value="True"/> 
          <Condition Binding="{Binding Plan.EditModel.EditEnabled}" Value="True"/> 
         </MultiDataTrigger.Conditions> 
         <Setter Property="Cursor" Value="Pen"/> 
        </MultiDataTrigger> 
       </Style.Triggers> 
      </Style> 
     </Border.Style> 
     <Viewbox> 
      <TextBlock Text="{Binding ObjectLabel.Text}" Foreground="{Binding ObjectLabel.FontColour}"/> 
     </Viewbox> 
    </Border> 
</DataTemplate> 

而後面的代碼:

public partial class VisualDataTemplates : ResourceDictionary 
{ 
    private Int32 _originalZIndex; 
    private const Double _scaleSize = 1.5; 
    private const Double _standardScaleSize = 1; 

    public VisualDataTemplates() 
    { 
     InitializeComponent(); 
    } 

    protected void MouseEnter(Object sender, RoutedEventArgs e) 
    { 
     Border border = sender as Border; 
     ContentPresenter presenter = border.TemplatedParent as ContentPresenter; 

     _originalZIndex = Canvas.GetZIndex(presenter); 
     Canvas.SetZIndex(presenter, DisplayOrders.FrontItem); 

     SetTransform(border, _scaleSize); 
    } 

    protected void MouseLeave(Object sender, RoutedEventArgs e) 
    { 
     Border border = sender as Border; 
     ContentPresenter presenter = border.TemplatedParent as ContentPresenter; 
     Canvas.SetZIndex(presenter, _originalZIndex); 

     SetTransform(border, _standardScaleSize); 

    } 

    private void SetTransform(Border border, Double value) 
    { 
     ScaleTransform transform = border.RenderTransform as ScaleTransform; 
     transform.ScaleX = transform.ScaleY = value; 
    } 
} 

唯一的問題我現在的情況是它速度很慢,所以我可能不得不完全放棄這個想法,併爲懸停找到另一個視覺效果。

如果其他人有任何更好的想法,請提供。

感謝

保羅