用於左側面板的WPF MVVM擴展功能

我有一個分爲兩列的WPF MVVM應用程序。左邊的寬度約爲寬度的25％，幷包含一個可滾動的對象列表和一個計算按鈕。右側窗格是結果窗格，大約是寬度的75％。用於左側面板的WPF MVVM擴展功能

左側窗格包含在嵌入主應用程序窗口的UserControl中。主應用程序使用帶兩列的Grid佈局，第一列是UserControl，第二列是包含結果的StackPanel。目前，UserControl綁定到數據的ViewModel。

我想要實現的是讓此UserControl顯示爲默認情況下的項目摘要列表，但要在控件右側有一個展開箭頭，並且如果單擊該左側面板「幻燈片「向右移動，直到它佔據應用寬度的75％並越過結果窗格的頂部，並且數據模板需要更改以使顯示從簡單的對象列表變爲顯示所有對象的大網格每個對象的細節。

因此，該應用程序有兩種狀態，一種在左手控件寬度爲25％時摺疊，並且包含基礎視圖模型數據的縮略渲染，並且當您單擊展開時，它會滑動顯示幻燈片效果正確的做法是打開最多75％的應用程序寬度，並將底層數據的渲染更改爲詳細視圖。

任何人都可以建議如何最好地實現這一目標嗎？

來源

2013-07-23 NZJames

因此，當左側面板從25％變爲75％時，DataTemplate實際在TimeLine中切換的時間，右側展開按鈕被單擊時還是面板達到75％或其他位置時的右側？ – Viv

你可以認爲這是純粹的WPF視覺效果。首先定義您的網格是這樣的：

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="2*"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 

    <Border x:Name="Results" Grid.Column="1" Grid.ColumnSpan="2"/> 

    <Border x:Name="LeftPanel" Grid.Column="0"/> 

    <Border x:Name="LeftExpandPanel" Grid.Column="0" Grid.ColumnSpan="2" Visibility="Collapsed"/> 

</Grid>

展開面板在底部，以確保它在另外兩個頂部。將簡單列表放在左側面板上，左側擴展面板上包含豐富項目模板的複雜列表以及結果中的結果UI。

然後定義一組動畫和狀態來處理LeftExpandPanel的動畫開關可見性（從Collapsed到Visible和從Visible到Collapsed）。

最後是處理點擊箭頭按鈕。您可以將代碼放在代碼中，因爲它純粹是與UI相關的。你需要做兩件事情的處理程序中：按鈕

改變箭頭的方向，並保存（展開或摺疊）狀態
開始動畫。

完成。希望它能幫助你。

來源

2013-07-23 20:46:36

是的，這與用戶界面相關，並不意味着代碼隱藏是直接在xaml中直接處理它的時候。您可以使用'EventTrigger'並在「EnterActions」上應用Storyboard。 – Viv

另外chaning狀態的箭頭按鈕將毫無意義，因爲它將被75％的'LeftExpandPanel'隱藏。您需要將摺疊功能鏈接到「LeftExpandPanel」。 – Viv

最後，從OP的發佈要求'它向右滑動一個可見的滑動效果'，只要使用Visibility就不會削減它。你需要在x軸上使用類似'TranslateTransform'的東西（或者將-ve Margin和clip-to-bounds混淆在一起），在「LeftPanel」和「LeftPanel」之間可能會出現'OpacityMask'淡出。 LeftExpandPanel」。 – Viv

用於左側面板的WPF MVVM擴展功能

回答

相關問題