How to create a hovered toolbar?
Clicking to expand the ToolBar will not shrink the Canvas.
Expander works for expanding, but the canvas will get shrinked.
<UserControl x:Class="smartgrid.studio.View.GraphicEditorView"
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:model="clr-namespace:smartgrid.studio.Model"
xmlns:studio="clr-namespace:smartgrid.studio"
xmlns:metro="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
mc:Ignorable="d"
d:DesignHeight="1000" d:DesignWidth="1000">
<DockPanel>
<Expander DockPanel.Dock="left" Header ="Toolbar" FontSize="18" ExpandDirection="Up">
<TreeView Name="GraphicEditorEntityTree" Background="Transparent" BorderBrush="Transparent" ItemsSource="{Binding GraphicEditorEntities}"/>
</Expander>
<Canvas/>
</DockPanel>
</UserControl>
You can overlay things by putting them in a Grid without rows or columns, the sizing of your toolbar is an independent matter (you can still use an expander for that).
http://msdn.microsoft.com/en-us/library/system.windows.controls.panel.zindex.aspx
Panel.ZIndex might be the solution.
<Grid x:Name="LayoutRoot">
<Grid x:Name="Toolbar" Panel.ZIndex="1000" Visibility="Collapsed">
</Grid>
<canvas />
</Grid>
Related
I am in the process of teaching myself WPF and have an issue that is confusing me. In the XAML below when I open the app the label and image are in the top left part of the window, but when I maximize the window they shift towards the middle. What am I missing that will make the controls keep their relative position?
<Window x:Class="WafLuckyDog.Presentation.Views.ShellWindow"
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:vm="clr-namespace:WafLuckyDog.Applications.ViewModels"
mc:Ignorable="d" Title="{Binding Title}" Icon="{StaticResource ApplicationIcon}" Width="994.273" Height="840"
d:DataContext="{d:DesignInstance vm:ShellViewModel}">
<Window.Background>
<ImageBrush ImageSource="{StaticResource Background}"></ImageBrush>
</Window.Background>
<DockPanel Margin="0,0,-539,0">
<Grid>
<Image Name="Logo" HorizontalAlignment="Left" Margin="0,10,0,669" Width="129"
Source="{StaticResource Logo}" />
<Label Content="Label" HorizontalAlignment="Left" Margin="10,145,0,0" VerticalAlignment="Top" Foreground="AntiqueWhite"/>
</Grid>
</DockPanel>
</Window>
First, you have a DockPanel that has no close tag and is doing nothing, it will give a compile error, so remove it. Also, remove the bottom margin and add a Height and VerticalAlignment properties. The VerticalAlignment and HorizontalAlignment ensures a top right corner anchor.
<Window x:Class="WafLuckyDog.Presentation.Views.ShellWindow"
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:vm="clr-namespace:WafLuckyDog.Applications.ViewModels"
mc:Ignorable="d" Title="{Binding Title}" Icon="{StaticResource ApplicationIcon}" Width="994.273" Height="840"
d:DataContext="{d:DesignInstance vm:ShellViewModel}">
<Window.Background>
<ImageBrush ImageSource="{StaticResource Background}"></ImageBrush>
</Window.Background>
<Grid>
<Image Name="Logo" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Width="129" Height="129"
Source="{StaticResource Logo}" />
<Label Content="Label" HorizontalAlignment="Left" Margin="10,145,0,0" VerticalAlignment="Top" Foreground="AntiqueWhite"/>
</Grid>
</Window>
I've created a UserControl that contains a ScrollViewer, a StackPanel and two buttons. I've disabled the horizontal scroll bar and want to use the buttons to scroll. But when I set HorizontalSnapPointsType inside of the control it doesn't work. If I add the ScrollViewer directly into my main xaml the property is set. The other properties like HorizontalScrollBarVisibility and HorizontalScrollMode are set properly so I'm not sure what the issue is. I've included xaml below.
<UserControl
x:Class="TestApp.Controls.CarouselScrollViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<ScrollViewer x:Name="ScrollViewer"
HorizontalScrollBarVisibility="Hidden"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Hidden"
VerticalScrollMode="Disabled"
HorizontalSnapPointsType="Mandatory">
<ContentPresenter x:Name="Content" Content="{x:Bind ScrollViewerContent}" />
</ScrollViewer>
<Button VerticalAlignment="Center" HorizontalAlignment="Left" Content="LEFT" Background="White" Click="LeftButton_OnClick" Name="BtnLeft"/>
<Button VerticalAlignment="Center" HorizontalAlignment="Right" Content="RIGHT" Background="White" Click="RightButton_OnClick" Name="BtnRight"/>
</Grid>
And then the xaml that's calling the control.
<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp"
xmlns:controls="using:TestApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<controls:CarouselScrollViewer SegmentWidth="400">
<controls:CarouselScrollViewer.ScrollViewerContent>
<StackPanel Orientation="Horizontal">
<Image Source="Assets/cole_anne.png" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/icecream.JPG" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/jibby_hotdog.png" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/andy_courtney_norah.png" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/boating.JPG" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/dev.jpg" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/moir_crab.jpg" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/MoirJudLindsayIlgaboating.jpg" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
</StackPanel>
</controls:CarouselScrollViewer.ScrollViewerContent>
</controls:CarouselScrollViewer>
</Grid>
ScrollViewer.HorizontalSnapPointsType property declares how manipulation behavior reacts to the snap points along the horizontal axis. And as it is declared in the Remarks, this property works for panning actions:
For panning actions, there are often natural stopping places. Snap points provide a way to indicate where these places are. Then, when a user swipes, the manipulation result favors that natural point using behavior as expressed by a SnapPointsType value.
More specifically, this property applies in Touch mode. Ref the "Panning behaviors" section of Guidelines for panning:
Panning with the swipe gesture introduces inertia behavior into the interaction when the touch contact is lifted. With inertia, the content continues to pan until some distance threshold is reached without direct input from the user. Use snap points to modify this inertia behavior.
However, in you code, you've disabled horizontal scroll and used buttons to scroll, so snap points won't work and setting HorizontalSnapPointsType property won't have any effect.
There is one Grid and I drop an Image control into the Grid.
What I do : just simply change both the property-HorizontalAlignment and VerticalAlignment to 'Center'.
However the image control performs strangely unlike other controls do. This Image control center itself according to its upper left corner like below :
I want to know why it performs in this way?
EDIT
Here is my XAML:
<UserControl x:Class="Entity.WPF.Controls.ShopProfile"
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"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="780">
<Grid>
<DockPanel >
<Grid>
<Image HorizontalAlignment="Center" Height="100" Margin="0" VerticalAlignment="Center" Width="100"/>
</Grid>
</DockPanel>
</Grid>
And if I set margin like Margin="-50,-50,0,0",it is centered actually,but why other controls don't need this setting?
That's interesting, I'm not sure why that happens, or if it's documented somewhere.
To answer your question, how to center the image control inside a grid, just remove those properties and the image will be centered in the grid automatically.
<Grid>
<Image Height="100" Margin="0" Width="100" />
</Grid>
I'm having trouble to adjust the Canvas inside the Grid in WPF. I want it to have a 10px margin from the Right and Top sides of the Grid. What am I doing wrong in the below code?
<Window x:Class="Layout2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="DrawingArea" Background="Black">
<Canvas x:Name="InformationLayer"
Background="White"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Right="10"
Top="10"
Width="200" Height="30" >
</Canvas>
</Grid>
</Window>
Right and Top are attached properties of the Canvas class that position an element within a parent Canvas object. I do not believe they have a semantic meaning when used in the Canvas tag itself (unless of course you are nested in a canvas).
Instead, use the margin property:
<Canvas x:Name="InformationLayer"
Background="White"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,10,10,0"
Width="200" Height="30" >
</Canvas>
Margins are formatted as "Left, Top, Right, Bottom" in case you need to modify!
I have a usercontrol that I am placing in a grid. Inside the grid I am also drawing lines. These lines appear above the usercontrol like they should.
When the user clicks on my usercontrol, I am showing another part of the usercontrol, an xaml element (making it visible) and I need it to appear above the drawn lines.
I've tried Canvas.ZIndex. That seems to only work with elements inside my usercontrol. If I set the usercontrols ZIndex high, then it all appears above the lines.
Here is the Min working example:
I need the Blue square to stay below the black line and the yellow ellipse to be above the black line.
--Main Page--
<UserControl xmlns:SWE_UserControlOverlap="clr-namespace:SWE_UserControlOverlap" x:Class="SWE_UserControlOverlap.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<SWE_UserControlOverlap:SWE />
<Line Stroke="Black" StrokeThickness="10" Stretch="Fill" X1="0" Y1="0" X2="1" Y2="1"></Line>
</Grid>
</UserControl>
--UserControl--
<UserControl x:Class="SWE_UserControlOverlap.SWE"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle Fill="Blue" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp_1"></Rectangle>
<Ellipse Margin="100" Fill="Yellow" ></Ellipse>
</Grid>
</UserControl>
Don't set a ZIndex on the control, just modify it for the sub controls.
<Line Canvas.ZIndex="1" />
<Rectangle Canvas.ZIndex="0" />
<Ellipse Canvas.ZIndex="2" />
As I found in various spots on the web - this is just not possible.