On your silverlight sample pages You are using OptionsPanel. Here is the code in App.xaml:
<LinearGradientBrush x:Key="BorderBackgroundBrush" StartPoint="0.0, 0.0" EndPoint="0.0, 1.0"> <GradientStop Color="#FFFFFFFF" Offset="0"/> <GradientStop Color="#e0e2e8" Offset="1"/> </LinearGradientBrush> <LinearGradientBrush x:Key="GradientBorderBrush" StartPoint="0.0, 0.0" EndPoint="0.0, 1.0"> <GradientStop Color="#FFFFFFFF" Offset="0"/> <GradientStop Color="#FFD6D6D6" Offset="1"/> </LinearGradientBrush> <Style x:Key="BorderStyle" TargetType="Border"> <Setter Property="CornerRadius" Value="3"/> <Setter Property="Background" Value="{StaticResource BorderBackgroundBrush}"/> <Setter Property="BorderBrush" Value="{StaticResource GradientBorderBrush}"/> <Setter Property="BorderThickness" Value="4"/> <Setter Property="Effect"> <Setter.Value> <DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="0" Opacity="0.6"></DropShadowEffect> </Setter.Value> </Setter> </Style> <Style x:Key="ScrollViewerStyle" TargetType="ScrollViewer"> <Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="Background" Value="Transparent" /> <Setter Property="VerticalScrollBarVisibility" Value="Auto" /> <Setter Property="HorizontalScrollBarVisibility" Value="Auto" /> </Style> <Style TargetType="optPanel:OptionsPanel"> <Setter Property="Foreground" Value="#FF535F64" /> <Setter Property="FontSize" Value="11" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="optPanel:OptionsPanel"> <Border Style="{StaticResource BorderStyle}"> <Grid Background="White"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <!-- Header 2CBDF9--> <Border x:Name="optPanel" Background="#28C5FF" Grid.ColumnSpan="2"> <TextBlock x:Name="textBlock" Text="{TemplateBinding HeaderText}" FontSize="12" Foreground="Black" TextWrapping="Wrap" Margin="5,3,26,5"/> </Border> <ToggleButton x:Name="btnClose" Content="X" IsChecked="True" Width="20" Height="20" FontSize="10" FontWeight="Normal" IsThreeState="False" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0 3 3 3"/> <ToggleButton x:Name="btnState" Content="-" IsChecked="True" Width="20" Height="20" FontSize="10" FontWeight="ExtraBold" IsThreeState="False" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0 3 26 3"/> <ScrollViewer x:Name="scrollContent" Style="{StaticResource ScrollViewerStyle}" Grid.Row="1" Grid.ColumnSpan="2"> <ItemsPresenter Grid.Row="1"/> </ScrollViewer> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
And OptionsPanel.cs code:
using System;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using System.Windows.Controls.Primitives;namespace nDOCUSSL4{ public class OptionsPanel : ItemsControl { ScrollViewer scrollContent; public OptionsPanel() { base.DefaultStyleKey = typeof(OptionsPanel); this.VerticalAlignment = System.Windows.VerticalAlignment.Top; this.HorizontalAlignment = System.Windows.HorizontalAlignment.Left; Loaded += new RoutedEventHandler(CustomPanel_Loaded); } void CustomPanel_Loaded(object sender, RoutedEventArgs e) { this.UpdateLayout(); var rootElement = VisualTreeHelper.GetChild(this, 0) as Border;/*kada ovde izbaci grešku znači da si stavio na xaml stranici da je visibility=collapsed*/ var winHandle = rootElement.FindName("optPanel") as Border; var btnState = rootElement.FindName("btnState") as ToggleButton; scrollContent = rootElement.FindName("scrollContent") as ScrollViewer; winHandle.MouseMove += new MouseEventHandler(winHandle_MouseMove); winHandle.MouseLeftButtonDown += new MouseButtonEventHandler(winHandle_MouseLeftButtonDown); winHandle.MouseLeftButtonUp += new MouseButtonEventHandler(winHandle_MouseLeftButtonUp); btnState.Click += new RoutedEventHandler(btnState_Click); this.UpdateLayout(); GeneralTransform objGeneralTransform = this.TransformToVisual(this.Parent as FrameworkElement); Point point = objGeneralTransform.Transform(new Point(0, 0)); tTranslate.X = point.X; tTranslate.Y = point.Y; this.Margin = new Thickness(0); this.VerticalAlignment = System.Windows.VerticalAlignment.Top; this.HorizontalAlignment = System.Windows.HorizontalAlignment.Left; this.RenderTransform = tTranslate; } void btnState_Click(object sender, RoutedEventArgs e) { var btnState = (ToggleButton)sender; scrollContent.Visibility = btnState.IsChecked.Value ? System.Windows.Visibility.Visible : System.Windows.Visibility.Collapsed; btnState.Content = btnState.IsChecked.Value ? "-" : "+"; } void btnClose_Click(object sender, RoutedEventArgs e) { /* I get the feeling that I should write somethig here to close OptionsPanel, but what? */ } #region Moving TranslateTransform tTranslate = new TranslateTransform(); Point borderP; Point currentP; double maxMarginLeft; double maxMarginTop; bool dragOn = false; private void winHandle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { var c = sender as System.Windows.FrameworkElement; dragOn = true; this.Opacity *= 0.5; borderP = e.GetPosition(sender as Border); c.CaptureMouse(); maxMarginLeft = (this.Parent as FrameworkElement).ActualWidth - this.ActualWidth; maxMarginTop = (this.Parent as FrameworkElement).ActualHeight - this.ActualHeight; } private void winHandle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { if (dragOn) { var c = sender as System.Windows.FrameworkElement; this.Opacity = 1; c.ReleaseMouseCapture(); dragOn = false; } } private void winHandle_MouseMove(object sender, MouseEventArgs e) { if (dragOn) { currentP = e.GetPosition(sender as Border); var x = tTranslate.X + currentP.X - borderP.X; var y = tTranslate.Y + currentP.Y - borderP.Y; if (x < 0) x = 0; if (y < 0) y = 0; if (x > maxMarginLeft) x = maxMarginLeft; if (y > maxMarginTop) y = maxMarginTop; tTranslate.X = x; tTranslate.Y = y; } } #endregion #region Dependency Properties public static DependencyProperty HeaderProperty = DependencyProperty.Register( "HeaderText", typeof(string), typeof(OptionsPanel), null); public string HeaderText { get { return (string)GetValue(HeaderProperty); } set { SetValue(HeaderProperty, value); } } #endregion }}
As you may have noticed I have added X button and click event
But I don't know how to close it? What is the code?
Regards, Marko.
Hello Marko,
I have been looking into your question and I am not sure that do you want to close. Do you want to detach the event handler?
I will be looking forward to hearing from you.
Sincerely,
Ekaterina
Developer Support Engineer
Infragistics, Inc.
www.infragistics.com/support
I am trying to close OptionsPanel, like when one closes the popup. Right now your OptionsPanel has a sort of minimize button and I want to add closing button.
I have been looking into your requirement and I have created a sample project for you with the functionality you want. Basically I added another ToggleButton, as you did, and handled its Click event and in the handler I set the Visibility of the OptionsPanel to Collapsed. Please let me know if this helps you or you need further clarifications on this matter.
Looking forward for your reply.
Hi Stefan,
Thanks a lot for sample project, this issue is resolved.
Regards,
Marko.
Thank you for your feedback. I am glad that you resolved your issue and I believe that other community members may benefit from this as well.
Thanks again.