I've created a custom error box with a rectangle for a header bar (the window is borderless). I'm trying to get the header rectangle to work like any window header bar and allow dragging to move. I have the code in place, however it only works by the edge of the rectangle (approx half a cm) and not anywhere in the rectangle.
I've set the height, width, and fill of the rectangle but not sure if there's a property I'm missing somewhere which allows click drag to work anywhere?
Rectangle definition:
<Window x:Class="CustomErrorBox"
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:View"
mc:Ignorable="d"
Title="WpfMessageBox" MinHeight="240"
MinWidth="500" MaxHeight="540" MaxWidth="720"
Background="Transparent"
SizeToContent="WidthAndHeight"
WindowStartupLocation="CenterScreen"
ShowInTaskbar="False" ResizeMode="NoResize"
WindowStyle="None" Topmost="True"
Name="WindowError" SizeChanged="WindowError_SizeChanged">
<Border BorderBrush="LightSlateGray" BorderThickness="0" CornerRadius="0">
<Grid >
<Grid.Resources>
<Style TargetType="Button" x:Key="MessageBoxButtonStyle">
<Setter Property="Background" Value="Transparent" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="Border" CornerRadius="0" BorderBrush="#000" BorderThickness="1,1,1,1" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" MouseDown="Rectangle_MouseDown" Width="Auto" Height="Auto">
<Rectangle.Fill>
<!-- TODO - Find some nice colours for header bar -->
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.5">
<GradientStop Color="#26508A" Offset="0.0"/>
<GradientStop Color="#2A739E" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="2" Width="Auto" Height="Auto">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.8">
<GradientStop Color="#FF7FCFFF" Offset="1"/>
<GradientStop Color="#FFCFFFCF"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid Grid.Row="0" Grid.ColumnSpan="2" MinHeight="40" >
<TextBlock Margin="5,1,0,1" Name="MessageTitle" FontWeight="Bold" TextTrimming="CharacterEllipsis" LineHeight="22" FontSize="16" VerticalAlignment="Center" Foreground="White"/>
</Grid>
<Image Name="img" Margin="5" Grid.Row="1" Grid.Column="0" Width="35" Height="35" Stretch="Fill" />
<ScrollViewer Grid.Row="1" Grid.Column="1" VerticalScrollBarVisibility="Auto">
<TextBlock Margin="10,5,10,5" VerticalAlignment="Center" TextWrapping="Wrap" Name="txtMsg" FontSize="14" LineHeight="20" ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ScrollViewer>
<Grid Grid.Row="2" Grid.ColumnSpan="2" Grid.Column="0" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Name="btnOk" Content="OK" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#b6dbd6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
<Button Name="btnYes" Content="Yes" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#b6dbd6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
<Button Name="btnNo" Content="No" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#dbb6b6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
<Button Name="btnCancel" Margin="3,5" Content="Cancel" MinWidth="70" Height="35" Click="Button_Click" Style="{StaticResource MessageBoxButtonStyle}" Foreground="Black"
Background="#dbb6b6" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
</StackPanel>
</Grid>
<Expander Header="Further Information" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,5,0,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0">
<TextBlock Margin="10,5,10,5" Name="ExpanderMessage" TextWrapping="Wrap" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
</ScrollViewer>
<Button Grid.Row="1" Name="ClipboardButton" Click="Button_Click_1" Content="Copy to Clipboard" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</Expander>
</Grid>
</Border>
</Window>
MouseClick function:
private void Rectangle_MouseDown(object sender, MouseButtonEventArgs e)
{
if (e.ChangedButton == MouseButton.Left)
this.DragMove();
}
The issue is that your "MessageTitle" TextBlock is in top of the Rectangle.
If you intend to set the Text property of this TextBlock to display a title, you could use a WindowChrome instead of handling the MouseDown event for the Rectangle:
<Window ...>
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="40" GlassFrameThickness="0" CornerRadius="0" />
</WindowChrome.WindowChrome>
<Border BorderBrush="LightSlateGray" BorderThickness="0" CornerRadius="0">
<Grid >
...
<Rectangle Grid.ColumnSpan="2" Height="40">
<Rectangle.Fill>
<!-- TODO - Find some nice colours for header bar -->
</Rectangle.Fill>
</Rectangle>
Related
This is my main window code it has one browse button and this button also display on user control but I don't want to show that button and space taken by that button in user control
<Window x:Class="Take_Out_Info.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Take Out Info" Height="auto" Width="auto"
Closing="Window_Closing" WindowState="Maximized">
<Window.Resources>
<Style x:Key="menuitem" TargetType="MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Bd" Padding="17,0,17,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" Uid="Border_38">
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Header}" Grid.Column="1" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Uid="ContentPresenter_33"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="#b5d2fc">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Menu Name="browsemenu" DockPanel.Dock="Top" Opacity="1" Height="50" Background="#1389e4" >
<MenuItem x:Name="browse" Width="140" Margin="10,10,10,10" HorizontalAlignment="Center" Style="{StaticResource menuitem}" Click="browse_Click" Height="30" Background="white" BorderThickness="2" BorderBrush="black">
<MenuItem.Header>
<TextBlock Width="90" TextAlignment="Center" VerticalAlignment="CENTER" Foreground="#1389e4" FontWeight="Bold" HorizontalAlignment="Center" FontSize="15" ><Run Text="Browse"/></TextBlock>
</MenuItem.Header>
</MenuItem>
</Menu>
</Grid>
<Grid Grid.Row="1" >
<ContentControl x:Name="DetailsControl" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
</Grid>
</Window>
this image is my main window
This is my user control code
<UserControl x:Class="Take_Out_Info.BrowseFile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:adorners="http://gu.se/Adorners"
Height="auto" Width="auto">
<Grid Background="#b5d2fc">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="50"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid Width="auto" Background="#1389e4">
<Button Grid.Row="0" Content="Browse" Name="btnBrowse" Click="btnBrowse_Click" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,0" Height="27" Width="140" Background="White" FontSize="15" BorderThickness="2" BorderBrush="Black" />
<Button Grid.Row="0" Content="Search" Name="btnSearch" Click="btnSearch_Click" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="190,0,0,0" Height="27" Width="140" Background="White" FontSize="15" BorderThickness="2" BorderBrush="Black" />
<Button Grid.Row="0" Content="Reset" Name="btnReset" Click="btnReset_Click" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="370,0,0,0" Height="27" Width="140" Background="White" FontSize="15" BorderThickness="2" BorderBrush="Black" />
<ContentControl x:Name="DetailsControl" VerticalAlignment="Top" HorizontalAlignment="Left" Width="0" />
</Grid>
<Grid Grid.Row="1" Width="auto">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Name="txtDayfind" adorners:Watermark.Text="Search Day Here" Grid.Row="1" Grid.Column="0" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnDayfind" Grid.Row="1" Grid.Column="0" Margin="110,0,0,0" Height="24" Width="24" Click="btnDayfind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnDayReset" Grid.Row="1" Grid.Column="0" Margin="157,0,0,0" Height="24" Width="24" Click="btnDayReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtDatefind" adorners:Watermark.Text="Search Date Here" Grid.Row="0" Grid.Column="1" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnDatefind" Grid.Row="0" Grid.Column="1" Margin="121,0,0,0" Height="24" Width="24" Click="btnDatefind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnDateReset" Grid.Row="0" Grid.Column="1" Margin="170,0,0,0" Height="24" Width="24" Click="btnDateReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtTimefind" adorners:Watermark.Text="Search Time Here" Grid.Row="0" Grid.Column="2" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnTimefind" Grid.Row="0" Grid.Column="2" Margin="121,0,0,0" Height="24" Width="24" Click="btnTimefind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnTimeReset" Grid.Row="0" Grid.Column="2" Margin="170,0,0,0" Height="24" Width="24" Click="btnTimeReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtLatfind" adorners:Watermark.Text="Search Lat Here" Grid.Row="0" Grid.Column="3" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnLatfind" Grid.Row="0" Grid.Column="3" Margin="121,0,0,0" Height="24" Width="24" Click="btnLatfind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnLatReset" Grid.Row="0" Grid.Column="3" Margin="170,0,0,0" Height="24" Width="24" Click="btnLatReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtLongfind" adorners:Watermark.Text="Search Long Here" Grid.Row="0" Grid.Column="4" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnLongfind" Grid.Row="0" Grid.Column="4" Margin="121,0,0,0" Height="24" Width="24" Click="btnLongfind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnLongReset" Grid.Row="0" Grid.Column="4" Margin="170,0,0,0" Height="24" Width="24" Click="btnLongReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtAddressfind" adorners:Watermark.Text="Search Address Here" Grid.Row="0" Grid.Column="5" Margin="-15,0,0,0" Height="24" Width="120"/>
<Button Name="btnAddressfind" Grid.Row="0" Grid.Column="5" Margin="121,0,0,0" Height="24" Width="24" Click="btnAddressfind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnAddressReset" Grid.Row="0" Grid.Column="5" Margin="170,0,0,0" Height="24" Width="24" Click="btnAddressReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
<TextBox Name="txtTypefind" adorners:Watermark.Text="Search Type Here" Grid.Row="0" Grid.Column="6" Margin="-10,0,0,0" Height="24" Width="120"/>
<Button Name="btnTypefind" Grid.Row="0" Grid.Column="6" Margin="121,0,0,0" Height="24" Width="24" Click="btnTypefind_Click">
<Image Source="002-search.png"></Image>
</Button>
<Button Name="btnTypeReset" Grid.Row="0" Grid.Column="6" Margin="170,0,0,0" Height="24" Width="24" Click="btnTypeReset_Click">
<Image Source="001-multiply.png"></Image>
</Button>
</Grid>
<TabControl x:Name="tabControl1" Grid.Row="2" Grid.Column="1" Height="auto" Width="auto" ItemsSource="{Binding tabs}" SelectedItem="{Binding SelectedEvaluation}" TabStripPlacement="Top" >
<TabControl.ContentTemplate >
<DataTemplate>
<DataGrid x:Name="dataGrid1" Height="auto" Width="auto" ItemsSource="{Binding}" AutoGenerateColumns="False" >
<DataGrid.Columns>
<DataGridTextColumn Width="*" Header="Day" Binding="{Binding [Day]}"/>
<DataGridTextColumn Width="*" Header="Date" Binding="{Binding [Date]}"/>
<DataGridTextColumn Width="*" Header="Time" Binding="{Binding [Time]}"/>
<DataGridTextColumn Width="*" Header="Lat" Binding="{Binding [Lat]}"/>
<DataGridTextColumn Width="*" Header="Long" Binding="{Binding [Long]}"/>
<DataGridTextColumn Width="*" Header="Address" Binding="{Binding [Address]}"/>
<DataGridTextColumn Width="*" Header="Type" Binding="{Binding [Type]}"/>
</DataGrid.Columns>
</DataGrid>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</UserControl>
What to do for getting output like image 3.I to want to remove that browse button which is in blue color and also space has taken on user control for that window.
User control takes the only controls of user control and not of the main window.
It can only show user-control controls and not of main windows control when opening on user control window.
Maybe you should remove this below Grid from XAML source:
<Grid Background="#b5d2fc">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Menu Name="browsemenu" DockPanel.Dock="Top" Opacity="1" Height="50" Background="#1389e4" >
<MenuItem x:Name="browse" Width="140" Margin="10,10,10,10" HorizontalAlignment="Center" Style="{StaticResource menuitem}" Click="browse_Click" Height="30" Background="white" BorderThickness="2" BorderBrush="black">
<MenuItem.Header>
<TextBlock Width="90" TextAlignment="Center" VerticalAlignment="CENTER" Foreground="#1389e4" FontWeight="Bold" HorizontalAlignment="Center" FontSize="15" ><Run Text="Browse"/></TextBlock>
</MenuItem.Header>
</MenuItem>
</Menu>
</Grid>
<Grid Grid.Row="1" >
<ContentControl x:Name="DetailsControl" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
</Grid>
If No , You can set 0 for <RowDefinition Height="50"/>
You can disable visibility of browse MenuItem's on click event(browse_Click) of mainwindow xaml page like below
private void browse_Click(object sender, RoutedEventArgs e)
{
browse.Visibility = Visibility.Collapsed;
}
i have the problem that i want to make a header Menu like a Menu in a Tablet or Mobilephone. It will look like this but we only see 7 Button and the 8 Button is outside of the viewing area in the Stackpanel.
When i click in the Stackpanel i am able to horizontally scroll by the left and right Keys, but i want that when my mousebutton is pressed, that ich can also scroll through it :D
i don't find enything like this, so i hope that you can help me :D
thanks
enter image description here
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="110"/>
<RowDefinition Height="*"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Rectangle Name="rectangel1" Grid.RowSpan="3">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0036A0" Offset="0.003"/>
<GradientStop Color="#FFE9EDFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid Grid.Column="1" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="750"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<ScrollViewer Name="scrollviewer1" Grid.Column="1" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Disabled">
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.ColumnSpan="1">
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn1" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 1" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn2" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 2" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn3" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 3" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn4" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 4" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn5" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 5" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn6" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 6" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,10,10">
<Rectangle Name="btn7" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 7" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
<Grid Width="87" Height="90" Margin="10,10,50,10">
<Rectangle Name="btn8" Fill="#FFF39999" RadiusX="10" RadiusY="10" />
<Label Content="Button 8" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="16" FontWeight="Bold"/>
</Grid>
</StackPanel>
</ScrollViewer>
<Rectangle Name="rectlinks" Grid.Column="0" Fill="#FFFF7676" MouseEnter="rectlinks_MouseEnter" />
<Rectangle Name="rectrechts" Grid.Column="2" MouseEnter="rectrechts_MouseEnter" Fill="#FFFF7474" />
</Grid>
Question has already been posted on stack,
You can find it here, with a solution,
in WPF. How to scroll Objects in ScrollViewer by mouse-dragging, like as iPhone?
Just a preliminary solution, If you switch the MousebuttonDown and Up events to the Right mouse button, then u can drag scroll with right button and press with left. I'll keep looking how to do with just left
Please take a look at the code below:
<Window x:Class="WpfTest.Test2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Test2" Height="300" Width="400">
<Grid>
<DockPanel LastChildFill="true">
<Expander DockPanel.Dock="Left" Header="" Background="#E2FFD6"
HorizontalAlignment="Left" VerticalAlignment="Stretch"
ExpandDirection="Left" IsExpanded="True" Height="Auto">
<StackPanel>
<Button Content=" open some tabs and show a messagebox "/>
<Button Content="do something else"/>
</StackPanel>
</Expander>
<TabControl HorizontalAlignment="Stretch">
<!-- some tabs here -->
</TabControl>
</DockPanel>
</Grid>
</Window>
which results in this:
As you see in the picture, this doesn't look nice and I want to move the expander icon to the center of the header. How can I do this? I tried changing the HeaderTemplate, but it didn't affect the icon placement.
This behaviour is hard-coded in the Template. When we edit a copy:
Rightclick your element in the designer window (not in the Xaml-Code),
then "Edit Template..." and "Edit a Copy..."
We find the relevant code in the ExpanderLeftHeaderStyle
<Style x:Key="ExpanderLeftHeaderStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.LayoutTransform>
...
</Grid.LayoutTransform>
<Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>
<Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" StrokeThickness="2" VerticalAlignment="Center"/>
</Grid>
<ContentPresenter HorizontalAlignment="Center" Margin="0,4,0,0" Grid.Row="1" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
...
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The RowDefinitions determine the location of the Icon (= the inner Grid), so we need to change them and the Row assignments for the inner Grid and ContentPresenter accordingly:
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="19"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.LayoutTransform>
...
</Grid.LayoutTransform>
<Ellipse x:Name="circle" Fill="{StaticResource Expander.Static.Circle.Fill}" HorizontalAlignment="Center" Height="19" Stroke="{StaticResource Expander.Static.Circle.Stroke}" VerticalAlignment="Center" Width="19"/>
<Path x:Name="arrow" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Center" SnapsToDevicePixels="false" Stroke="{StaticResource Expander.Static.Arrow.Stroke}" StrokeThickness="2" VerticalAlignment="Center"/>
</Grid>
<ContentPresenter Grid.Row="2" HorizontalAlignment="Center" Margin="0,4,0,0" RecognizesAccessKey="True" SnapsToDevicePixels="True" VerticalAlignment="Top"/>
</Grid>
</Border>
Right now I have button on a usercontrol. Clicking that button will launch a window as follows,
private void Button_Click(object sender, RoutedEventArgs e)
{
this.Effect = new BlurEffect();
dlg = new WidgetWindow();
dlg.Owner = Window.GetWindow(this);
dlg.Show();
this.Effect = null;
}
Now please see the Image. Whenever I click outside the widget window i.e. anytime I click on the grayed out area of the usercontrol, I want the circular widget window to close. I am trying to raise an event for the usercontrol as follows but the event never fires. I also tried mouse down with no luck. I also tried raising the events to the child container of the usercontrol which is Grid in my case but the event wont raise. Please help
private void Tbl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (dlg != null)
{
dlg.Close();
}
}
Here is the code for the WidgetWindow.
<Window WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowState="Maximized"
AllowsTransparency="True" Background="#80000000"
Title="WidgetWindow" ShowInTaskbar="False" Loaded="widget_Loaded">
<Grid>
<Grid.Background>
<SolidColorBrush Opacity="0.5" Color="White"></SolidColorBrush>
</Grid.Background>
<ListBox BorderThickness="0" Name="lstBox" Height="980" Width="980" ItemsSource="{Binding}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<local:CircularPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Background>
<SolidColorBrush Opacity="0" Color="Gray"></SolidColorBrush>
</ListBox.Background>
</ListBox>
<Grid Height="524" Width="524" Margin="54,36,0,0">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"></GradientStop>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Grid Name="Inner1" Margin="0,5,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn1" Width="130" Height="130" HorizontalAlignment="Center" VerticalAlignment="Top" Click="btn1_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Grid.Row="0" Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/fruits.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="0,4,0,0" FontSize="12" HorizontalAlignment="Center" Grid.Row="1">Locate Sessions</TextBlock>
</Grid>
<Grid Name="Inner2" Margin="34,124,0,150">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn2" Width="130" Height="130" HorizontalAlignment="Left" VerticalAlignment="Center" Click="btn2_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/bird.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="20,4,0,0" FontSize="12" HorizontalAlignment="Left" Grid.Row="1">Mass Surveillence</TextBlock>
</Grid>
<Grid Name="Inner3" Margin="0,124,34,150">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn3" Width="130" Height="130" HorizontalAlignment="Right" VerticalAlignment="Center" Click="btn3_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/forest.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="0,4,8,0" FontSize="12" HorizontalAlignment="Right" Grid.Row="1">Subscriber Intelligence</TextBlock>
</Grid>
<Grid Name="Inner4" Margin="34,285,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn4" Width="130" Height="130" HorizontalAlignment="Left" VerticalAlignment="Center" Click="btn4_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/nature.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="45,4,0,0" FontSize="12" HorizontalAlignment="Left" Grid.Row="1">Analytics</TextBlock>
</Grid>
<Grid Name="Inner5" Margin="0,285,34,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Row="0" Name="btn5" Width="130" Height="130" HorizontalAlignment="Right" VerticalAlignment="Center" Click="btn5_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/beach.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Margin="0,4,40,0" FontSize="12" HorizontalAlignment="Right" Grid.Row="1">Historical</TextBlock>
</Grid>
<Grid Name="Inner6" Margin="0,0,0,10" >
<Button Name="btn6" Width="130" Height="130" HorizontalAlignment="Center" VerticalAlignment="Bottom" Click="btn6_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Stroke="Black" StrokeThickness="1">
<Ellipse.Fill>
<ImageBrush ImageSource="Images/Exit.jpg" Stretch="Fill"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<Grid Name="Inner7" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Name="btn7" Width="130" Height="130">
<Button.Template>
<ControlTemplate TargetType="Button">
<Ellipse Name="pointerEllipse" Stroke="Black" StrokeThickness="1">
</Ellipse>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Grid>
<!--</ControlTemplate>
</Button.Template>
</Button>-->
</Grid>
</Window>
You can use Popup instead of WidgetWindow. Put all your WidgetWindow content into Popup. Configure Popup Staysopen="False". You can refer to below code:
<Popup Name="popLink" StaysOpen="False" Placement="Mouse" MaxWidth="200"
PopupAnimation="Slide" AllowsTransparency="True">
...Your content
</Popup>
Use popLink.IsOpen = true to open it.
So I have a multi tier header, that is basically just a header with two sub headers underneath it,
the code for the look of the header is:
<Style x:Key="PlateDetailsmultitier" TargetType="DataGridColumnHeader" BasedOn="{StaticResource DataGridHeaderStyleBase2Tier}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="49" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24" />
<RowDefinition Height="1" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="49"/>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="49"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="LightGray" Grid.ColumnSpan="3"/>
<Rectangle Fill="Black" Height="1" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.ColumnSpan="3"/>
<ContentPresenter Content="Plate Details" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="3" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Height="1" Grid.Row="1" Grid.ColumnSpan="3"/>
<ContentPresenter Content="t__plate" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="1" />
<ContentPresenter Content="σy" Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="3" Grid.Column="1" />
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="4" Grid.Column="1" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But the problem is that when I go to try to edit these cells it just selects both columns as one cell, and i can not edit either of these columns.
I would like to be able to edit both columns seperatly.
To start off datagrid template column I just used
<DataGridTemplateColumn HeaderStyle="{StaticResource PlateDetailsmultitier}" Width="100">
Is anyone aware of a solution to this problem.