We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi
I have a wpf
project with a DockingManager in the MainWindow. I’m trying to put a View (ButtonsView)
in a window which I want to be resized as I change the width of the content (ButtonsView).
This is a User Control with a StackPanel and a ListView that I want to hide
depending on the MouseEnter in the buttons I put in the StackPanel. Here is the
code:
MainWindow.xaml
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ApplicationTest"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
x:Class="ApplicationTest.MainWindow"
xmlns:v="clr-namespace:ApplicationTest.View"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<syncfusion:DockingManager x:Name="dockingManager" DockFill="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
UseDocumentContainer="True" ShowTabListContextMenu="True" >
<ContentControl x:Name="actions" HorizontalAlignment="Left" syncfusion:DockingManager.Header="Actions"
syncfusion:DockingManager.SizetoContentInDock="True" >
<v:ButtonsView HorizontalAlignment="Left" />
</ContentControl>
</syncfusion:DockingManager>
</Grid>
</Window>
ButtonsView.xaml
<UserControl x:Class="ApplicationTest.View.ButtonsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:ApplicationTest.View"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d" >
<UserControl.Resources>
<DataTemplate x:Key="GridViewHeaderTemplate">
<TextBlock FontWeight="Black" FontSize="22" Foreground="DarkBlue" Text="{Binding}"/>
</DataTemplate>
<Storyboard x:Key="StoryboardCloseListView"
>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rootObject" >
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="400"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="136"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="StoryboardOpenListView">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rootObject" >
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="136"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="400"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="rootObject" MouseLeave="rootObject_MouseLeave"
>
<Border x:Name="borderMenu" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Stretch" CornerRadius="5"
Background="#FFE3EEDE" >
<Border.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseLeave" SourceName="borderMenu">
<BeginStoryboard Storyboard="{StaticResource StoryboardCloseListView}"/>
</EventTrigger>
</Border.Triggers>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Width, ElementName=spButton}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<StackPanel x:Name="spButton">
<Button Height="125" Width="125" Margin="5,8,5,8" MouseEnter="Button_MouseEnter"/>
</StackPanel>
</Border>
<ListView Grid.Column="1" x:Name="lvSelector" Margin="5,8,5,8"
PreviewMouseRightButtonDown="lvSelector_PreviewMouseRightButtonDown"
ContextMenuOpening="lvSelector_ContextMenuOpening" HorizontalAlignment="Stretch">
<ListView.View>
<GridView >
<GridViewColumn x:Name="gvlList" HeaderTemplate="{StaticResource GridViewHeaderTemplate}"
DisplayMemberBinding="{Binding NAME}" />
</GridView>
</ListView.View>
</ListView>
</Grid>
</Border>
</Grid>
</UserControl>
ButtonsView.xaml.cs
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media.Animation;
namespace ApplicationTest.View
{
public partial class ButtonsView : UserControl
{
private bool IsOpen = false;
private bool InEdition = false;
public ButtonsView()
{
InitializeComponent();
}
private void DisplayListView(bool Open)
{
Storyboard sb;
if (Open)
sb = this.FindResource("StoryboardOpenListView") as Storyboard;
else
sb = this.FindResource("StoryboardCloseListView") as Storyboard;
sb.Begin();
IsOpen = Open;
}
private void Button_MouseEnter(object sender, MouseEventArgs e)
{
// If it's not open, we open it
if (!IsOpen)
DisplayListView(true);
}
private void rootObject_MouseLeave(object sender, MouseEventArgs e)
{
// If it's open, we close it
if (IsOpen && !InEdition)
DisplayListView(false);
}
private void
lvSelector_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
// By
clicking the right mouse button a context menu will be shown, so
// in order to keep the listview opened,
we set InEdition = true
InEdition = true;
}
private void lvSelector_ContextMenuOpening(object sender, ContextMenuEventArgs e)
{
if (!InEdition)
e.Handled = true;
}
}
}
What I thought is that setting syncfusion:DockingManager.SizetoContentInDock="True", the ContentControl resizes
depending on the size of the content (ButtonView), but when I hide the
ListView, the ContentControl “Actions” doesn’t wrap it. What I want is that the
ContentControl “Actions” wraps the ButtonView and when this changes its size,
because the listview in shown or hidden, the ContentControl changes as well.
Thanks
