I want to change the alignment of my dockPanel, and I'm having some trouble. I'm relatively new to WPF, so that may explain it.
Anyways, here is the current layout:
<theme:bottomPanel DockPanel.Dock="Bottom" x:Name="bottomPanel" ClipToBounds="False" SnapsToDevicePixels="False" HorizontalAlignment="Center" Height="145" />
<theme:rightPanel DockPanel.Dock="Right" x:Name="rightPanel" ClipToBounds="False" SnapsToDevicePixels="False"/>
<theme:leftPanel DockPanel.Dock="Left" x:Name="leftPanel" ClipToBounds="False" SnapsToDevicePixels="False" />
<theme:MapPanel DockPanel.Dock="Top" x:Name="mapPanel" ClipToBounds="False" SnapsToDevicePixels="False" />
Visualized in Paint (lol) :
I would like to change the layout to something like the following:
Is this possible? If so, what approach would you recommend? Any guidance would be helpful! Thank you.
As an aside: is there any application that allows me to see my application layout as the app runs (i.e. add gridlines to each panel or something)?
Anyways, thanks!
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="Gray" Grid.ColumnSpan="3">
<TextBlock Text="Top Area"/>
</Border>
<Border Background="Magenta" Grid.Row="1" Height="200">
<TextBlock Text="Left Area"/>
</Border>
<Border Background="Red" Grid.Row="1" Grid.Column="1" Height="200">
<TextBlock Text="Bottom Area"/>
</Border>
<Border Background="Cyan" Grid.Column="2" Grid.RowSpan="2" Margin="0,200,0,0" Width="200">
<TextBlock Text="Right Area"/>
</Border>
</Grid>
Related
Is it possible to position the tapitem like this:
Child (Content) should span over grid but the parent (TapItem) shouldnt do this.
I tried it as following.
<Grid Grid.Column="1" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" x:Name="PropertyBarWidth"/>
<ColumnDefinition Width="10*" x:Name="DrawingAreaWidth"/>
<ColumnDefinition Width="1*" x:Name="LibraryWidth"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabControl Grid.ColumnSpan="3" Grid.RowSpan="2" x:Name="OpenDrawings" Background="{StaticResource B_drawingarea}" BorderThickness="0">
<TabItem Header="Test" Grid.Column="1" Grid.RowSpan="1" Grid.Row="0" Style="{StaticResource TabItemStyle}">
<local:UserControl1></local:UserControl1>
</TabItem>
</TabControl>
<Rectangle Grid.RowSpan="2" Fill="{StaticResource B_propertybar}"/>
<GridSplitter Grid.Row="0" Grid.RowSpan="2" Height="100" Width="20"/>
<Rectangle Grid.RowSpan="2" Grid.Column="2" Fill="{StaticResource B_propertybar}"/>
</Grid>
The problem here is, that the gridsplitter shouldn't move the content of the tabitem. But the left and right areas should move with the tapitem itself.
Maybe someone can help, thanks!
What you are trying to achieve looks more feasible with a Docking control than with a simple Grid splitter, just use the Xceed AvalonDock control, don't waste your time reinventing the wheel ;}:
<Window ...
xmlns:xcad="http://schemas.xceed.com/wpf/xaml/avalondock"
Title="MainWindow" Height="600" Width="1024">
<Grid>
<xcad:DockingManager BorderThickness="1">
<xcad:LayoutRoot x:Name="LayoutRoot">
<xcad:LayoutPanel Orientation="Horizontal">
<xcad:LayoutAnchorablePane IsMaximized="True" >
<xcad:LayoutAnchorable ContentId="MainTab" Title="MainTab" CanHide="False" CanClose="False"
AutoHideWidth="240">
<Grid>
<Border Background="LightSalmon"/>
<!--your main panel with the drawing usercontrol-->
</Grid>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorablePane>
</xcad:LayoutPanel>
<xcad:LayoutRoot.LeftSide>
<xcad:LayoutAnchorSide>
<xcad:LayoutAnchorGroup>
<xcad:LayoutAnchorable Title="LeftSideTools" ContentId="LeftSide">
<Grid>
<Border Background="LightSalmon"/>
<!--your left panel tools-->
</Grid>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorGroup>
</xcad:LayoutAnchorSide>
</xcad:LayoutRoot.LeftSide>
<xcad:LayoutRoot.RightSide>
<xcad:LayoutAnchorSide>
<xcad:LayoutAnchorGroup>
<xcad:LayoutAnchorable Title="RightSideTools" ContentId="RightSide">
<Grid>
<Border Background="LightSalmon"/>
<!--your right panel tools-->
</Grid>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorGroup>
</xcad:LayoutAnchorSide>
</xcad:LayoutRoot.RightSide>
</xcad:LayoutRoot>
</xcad:DockingManager>
</Grid>
Here is the package nugget.
I have a grid(user-control) as follows with rows 1:5 being an Expander which holds a ListView, however my attempts to get the Vertical scrollbar for the ListView within the Expander have not been successful.
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="*"></RowDefinition> <!--Expander with ListView-->
<RowDefinition Height="*"></RowDefinition> <!--Expander with ListView-->
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
The Expander with the ListView is as below, I also attempted enclosing the Expander within a ScrollViewer but then the sizing of the collapsed header takes up all the space
<Expander IsExpanded="True"
Background="#1F4762"
BorderBrush="#1F4762"
Foreground="#FFEEEEEE"
Grid.Row="1"
Visibility="{qc:Binding '$P.View.Count > 0 ? Visibility.Visible: Visibility.Collapsed', P={Binding AListCVS}}"
BorderThickness="1,1,1,0">
<Expander.Header>
<TextBlock FontWeight="Bold"
VerticalAlignment="Center"
Margin="5"
FontSize="14"
Width="200">
<Run Text="A Listers : " />
<Run Text="{Binding AListCVS.View.Count, Mode=OneWay}"></Run>
</TextBlock>
</Expander.Header>
<Expander.Content>
<ListView
HorizontalContentAlignment="Stretch"
AlternationCount="2"
Style="{StaticResource aCompareTemplate}"
ItemTemplateSelector="{StaticResource ATemplateSelector}"
x:Name="lview"
ItemsSource="{Binding AListCVS.View}"
Visibility="{Binding }">
</ListView>
</Expander.Content>
</Expander
The list template is as follows
<Style x:Key="aCompareTemplate"
TargetType="ListView">
<!--Control Template-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0"
MinWidth="900"
VerticalAlignment="Center"
Background="#D4E3F4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition MinWidth="200"></ColumnDefinition>
<ColumnDefinition MinWidth="400"></ColumnDefinition>
<ColumnDefinition Width="200*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Column="0"
Height="30">
<TextBlock Text=""
FontWeight="Bold"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap" />
</Border>
<Border Grid.Column="1"
Height="30">
<TextBlock Text=""
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border Grid.Column="2"
Height="30">
<TextBlock Text="A Data"
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
<Border Grid.Column="3"
Height="30">
<TextBlock Text="B Data"
FontWeight="Bold"
HorizontalAlignment="Left"
VerticalAlignment="Center" />
</Border>
</Grid>
<ItemsPresenter Grid.Row="1"></ItemsPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Any pointers are much appreciated.
Usually the problem with Scroll is due to the container in which it is inserted allow infinite size, and therefore it does not appear. Possibly you can correct this by setting a MaxHeight to your Grid.Row, or to your ListView.
Edit.: as was suggested by #FelixD. and as my above comment helped to solve the problem I am putting it here so the question can be marked as resolved.
This question already has answers here:
WPF XAML: How to automatically scale down children of a component in XAML?
(2 answers)
Scale images in listview to fit
(1 answer)
Closed 5 years ago.
Does anyone know if I can scale down an existing DataTemplate? In other words, if I have a DataTemplate that displays a group of text-blocks, and images at a size of 300 by 300, can I scale down that DataTemplate to 50x50 to create a view without modifying the DataTemplate itself?
I have several DataTemplates for different elements that are displayed in the diagram. I would like to do a scale down (Preview) of these DataTemplate in order to display it to the user as a list or a group of them.
At the moment my only choice would be to scale it down manually to the preview size, but I was wondering if there is a function I can use to scale it down automatically.
Thanks in advance.
<DataTemplate x:Key="sElementLA">
<Border BorderThickness="1" BorderBrush="{Binding Path=Data.Held, Converter={StaticResource heldConverter}}"
Background="Transparent" x:Name="ElementIcon"
Width="Auto" Height="Auto"
TouchDown="touchDownHandler" TouchUp="touchUpHandler"
TouchMove ="touchMoveHandler" TouchLeave="touchLeaveHandler"
Stylus.IsPressAndHoldEnabled="False"
go:Node.Movable="False"
go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
go:Node.LocationSpot="TopLeft"
go:Part.SelectionAdorned="True"
go:Part.SelectionElementName="ElementIcon"
go:Part.SelectionAdornmentTemplate="{StaticResource NodeSelectionAdornmentTemplate}"
go:Part.Resizable="False"
go:Part.ResizeElementName="ElementIcon"
go:Part.ResizeAdornmentTemplate="{StaticResource NodeResizeAdornmentTemplate}"
go:Node.RotationAngle="{Binding Path=Data.Angle, Mode=TwoWay}"
go:Part.Rotatable="False"
go:Part.DragOverSnapEnabled="True"
go:Part.DragOverSnapCellSpot="TopLeft"
go:Part.RotateAdornmentTemplate="{StaticResource NodeRotateAdornmentTemplate}">
<!--Element info-->
<Grid ShowGridLines="False" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="3" Width="300" Height="100" RadiusX="12" RadiusY="12"
StrokeThickness="1" Stroke="#5075ba" StrokeLineJoin="Round" StrokeStartLineCap="Round"
StrokeEndLineCap="Round" Fill="#bcc5d2"/>
<StackPanel Grid.Row="0" Grid.Column="0" Margin="30,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center">
<TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Medium"
FontSize="16px" Foreground="Black" HorizontalAlignment="Right" FontWeight="DemiBold"/>
<TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Regular"
FontSize="15px" Foreground="Black" HorizontalAlignment="Right"/>
<TextBlock Text="{Binding Path=Data, Mode=TwoWay}" FontFamily="Comapany Inspira Regular"
FontSize="15px" Foreground="Black" HorizontalAlignment="Right"/>
</StackPanel>
<!--Element Node and Icon I-->
<Grid ShowGridLines="False" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="1" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.6*" />
<ColumnDefinition Width="0.4*"/>
</Grid.ColumnDefinitions>
<go:SpotPanel MouseEnter="Node_MouseEnter" MouseLeave="Node_MouseLeave" Grid.Column="0" >
<go:NodePanel Sizing="Fixed" go:SpotPanel.Main="True" >
<Rectangle Width="85" Height="85" x:Name="CB_VIcon" RadiusX="0" RadiusY="0" Stroke="Transparent" StrokeThickness="0"
Cursor="Hand" Fill="{StaticResource CB_V}" SnapsToDevicePixels="True">
</Rectangle>
</go:NodePanel>
</go:SpotPanel>
<Grid ShowGridLines="False" Grid.Column="1" VerticalAlignment="Center" Margin="0,0,4,0" HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="CLD" Margin="0,22,4,0" Foreground="DarkGreen" FontSize="16"
TextWrapping="NoWrap" FontFamily="Comapany Inspira Medium" Height="Auto"
VerticalAlignment="Center" HorizontalAlignment="Center" />
<fa:ImaComapanyAwesome Grid.Row="1" VerticalAlignment="Top" Icon="InfoCircle" Height="30"
Foreground="#33cccc" Margin="0,0,4,-10" HorizontalAlignment="Center"/>
</Grid>
</Grid>
</Grid>
</Border>
</DataTemplate>
The easiest way would be wrap the template's container in a Viewbox. Viewbox will scale its contents to fit itself.
Since DataTemplate is usually used in an ItemsControl you may need to use a custom container to utilize a viewbox around the template.
How do I implement a persistent navigation bar. Basically an app bar that cannot be dismissed even by the right click action. MS as referred to this in this article ( https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn440584.aspx ) when discussing the flat navigation in the calculator app and also here ( http://blogs.windows.com/bloggingwindows/2014/05/13/windows-store-refresh-makes-it-easier-to-find-apps/ ) when reviewing changes to the windows store app in windows 8.1.
Here's how you do it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" x:Name="NavigationPart" Orientation="Horizontal">
<Button Content="Home" />
<Button Content="Products" />
<Button Content="Contact" />
</StackPanel>
<Frame Grid.Row="1" x:Name="ContentPart" />
</Grid>
Best of luck!
After reading your question i started googling and was not able to find any already available app bars for that. So as far as i know there is nothing like persistent App Bar. IsSticky property does help to some extent but still can be dismissed by right click.
But still you can customize things by yourself...
As for eg. you have referred this page in your question.
You can make your own implementation for the same.
This is my implementation just to get you started...
<Page
x:Class="App2.BlankPage5"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="120"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<Rectangle Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/windows-image.jpg" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Text="Home" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>
<TextBlock Text="Top Charts" Grid.Column="1" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Categories" Grid.Column="2" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Collection" Grid.Column="3" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Text="Accounts" Grid.Column="4" FontSize="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Width="110" Height="110">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/back.png" />
</Rectangle.Fill>
</Rectangle>
<TextBlock Margin="10, 0, 0, 0" Text="Store" FontSize="70" Grid.Column="1" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Row="2" >
<TextBlock Text="Your Content Here" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="100" Foreground="Black"/>
</Grid>
</Grid>
</Page>
It produces the following output :
I have not worked on the respective event handlers and i hope you can do that according to your needs.
A Basic Advice : Don't try to make too many changes to the already available design templates. Stick to them and only apply the required changes.
I'm trying to put a <Border/> around a <Grid/> in a page, however the border appears to be bordering the page rather than the grid.
This is only XAML in my page element.
<Border Background="Black">
<Grid Background="{ThemeResource ControlBackgroundBrush}" x:Name="LoginCredentials" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text="Username:" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Center" Grid.Row="0" HorizontalAlignment="Right" Margin="5"/>
<TextBox x:Name="UserName" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" Text="" Grid.Row="0" Grid.Column="1" TextChanged="UserChange" Margin="5"/>
<Button x:Name="LoginButton" Content="Login" Click="LoginButton_Click" Grid.Row="2" HorizontalAlignment="Right" Margin="5" TabIndex="0"/>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Grid.Row="2" Grid.Column="1" />
</Grid>
</Border>
As a test I created a resource to fill the background of the <Grid/> with a colour and also filled the background of the <Border/> with a different colour. The <Grid/> ends up as a box in the center of the screen as intended, but the border <Border/> fills the entire screen. Can anyone tell me why this happens and how to get the <Border/> to fit around the <Grid/> as I want?
Got it!
<Border Background="Black" VerticalAlignment="Center" HorizontalAlignment="Center">
....
</Border>
As soon as i posted the question, what i was missing became clear!