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,
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.
Hi Stefan,
Thanks a lot for sample project, this issue is resolved.
Regards,
Marko.
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.
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 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