I want the 4 buttons (notification, printer, three dots and light/dark theme buttons) to the right of the window while the Humburger button and the TextBox should remain in the Left which will leave us with an empty middle.
XAML:
<DockPanel >
<materialDesign:ColorZone Panel.ZIndex="{Binding ElementName=DemoItemsListBox, Path=SelectedItem.ZIndex}"
Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth3" materialDesign:ShadowAssist.ShadowEdges="Bottom"
Mode="PrimaryMid" DockPanel.Dock="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<DockPanel >
<ToggleButton DockPanel.Dock="Left" Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"
x:Name="MenuToggleButton"/>
<StackPanel DockPanel.Dock="Left">
<materialDesign:ColorZone Mode="PrimaryLight" Padding="8 4 8 4" CornerRadius="2" Panel.ZIndex="1"
Margin="16 0 0 0"
materialDesign:ShadowAssist.ShadowDepth="Depth1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button IsDefault="True" Command="{Binding SearchEmploye}"
Style="{DynamicResource MaterialDesignToolButton}">
<materialDesign:PackIcon Kind="Magnify" Opacity=".56" />
</Button>
<TextBox Text="{Binding SearchEmp,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Grid.Column="1" Margin="8 0 0 0" materialDesign:HintAssist.Hint=""
materialDesign:TextFieldAssist.DecorationVisibility="Hidden" BorderThickness="0"
MinWidth="200" VerticalAlignment="Center" />
</Grid>
</materialDesign:ColorZone>
</StackPanel>
<materialDesign:PackIcon HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="White" Kind="Printer" Width="24" Height="24"/>
<materialDesign:PackIcon Width="24" Height="24" VerticalAlignment="Center" Kind="Bell" Margin="0 0 5 0"></materialDesign:PackIcon>
<materialDesign:PackIcon VerticalAlignment="Center" Kind="ThemeLightDark" Width="24" Height="24"></materialDesign:PackIcon>
<materialDesign:PopupBox Foreground="White" DockPanel.Dock="Right" PlacementMode="BottomAndAlignRightEdges" StaysOpen="True"/>
</DockPanel>
</Grid>
</materialDesign:ColorZone>
</DockPanel>
My goal is to have something like this (It's worth mentioning that my window is using SizeToContent)
I wouldn't use a DockPanel for something like that; I'd just use a Grid. (I'm just using placeholders to show where things go, so put your Hamburger button where I have put <Button>Hamburger</Button>) The overall structure I'd aim for would be:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="Green">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal">
<Button>Hamburger</Button>
<TextBox>Search</TextBox>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal">
<Button>Print</Button>
<Button>Notification</Button>
<Button>Theme</Button>
<Button>DotDotDot</Button>
</StackPanel>
</Grid>
</Border>
<Grid Grid.Row="1">
<!-- Rest of screen -->
</Grid>
</Grid>
Related
I have window which initially gets loaded with a list of item, based on list view item selection, I have to populate data in different user controls in the same window. I have one model which is common across all the user controls but they have separate user controls. Everytime when the data is filled , models gets initialized and data grid remains empty in the UI, even though the data is present at the back end.
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="17*"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="1" BorderBrush="Black" Margin="5,5,5.4,5.2" Grid.ColumnSpan="2">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Margin="0 3 0 3" BorderThickness="1" BorderBrush="Gray">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="300"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="310"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!--ROW 2-->
<GroupBox Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Header="Rule Name" >
<ListBox ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible"
BorderBrush="Gray" BorderThickness="1"
Style="{x:Null}"
Name="lstSuggestedRule" SelectionMode="Single"
ItemsSource="{Binding RuleMetadata.SuggestedRuleList, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
SelectedItem="{Binding RuleMetadata.SelectedRule,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Margin="0 3 0 3" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Width="350" HorizontalAlignment="Stretch" Text="{Binding Path=ExpressionName}">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="SelectionChanged">
<interactivity:InvokeCommandAction Command="{Binding RuleSuggestionSelectionCommand}"
CommandParameter="{Binding Path= SelectedItems, ElementName=lstSuggestedRule}" />
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</ListBox>
</GroupBox>
<GroupBox Grid.Row="1" Grid.Column="1" Header="Rule MetaData" Grid.ColumnSpan="2" >
<DockPanel>
<local:RuleSuggestionMetaData />
</DockPanel>
</GroupBox>
<GroupBox Grid.Row="2" Grid.Column="1" Header="Rule Script" Grid.ColumnSpan="2">
<DockPanel>
<local:RuleSuggestionAvalonEditor HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding ElementName=lstSuggestedRule,Path=SelectedItem,Converter={StaticResource SuggestionVisibilityConverter},ConverterParameter= VB}" Margin="0,10,0,10.2" Width="537" />
<local:RuleTreeView HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Visibility="{Binding ElementName=lstSuggestedRule,Path=SelectedItem,Converter={StaticResource SuggestionVisibilityConverter} ,ConverterParameter= XML}" />
</DockPanel>
</GroupBox>
</Grid>
</Border>
<Grid Grid.Row="1" Grid.Column="1" Margin="0 0 10 3" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="3" Width="100"
Height="25" Margin="0,3,0,3"
ToolTip="Click to Cancel Operation"
Content="Close" Command="{Binding CancelRuleSuggestion}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}" >
</Button>
</Grid>
</Grid>
</Border>
</Grid>
This is the grid structure, where on listbox selection item, I have to populate data into user control ,user control also uses same view model
I try to align the TextBlocks to the left.
The button should take the rest of the area (Up to the picture).
How can I do this?
This is a UWP / C# App.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid VerticalAlignment="Center" HorizontalAlignment="Left">
<Button Background="Transparent" HorizontalAlignment="Stretch">
<StackPanel HorizontalAlignment="Left">
<TextBlock x:Name="TextBlock1" TextWrapping="Wrap" Text="Name1"/>
<TextBlock x:Name="TextBlock2" TextWrapping="Wrap" Text="Name2" />
</StackPanel>
</Button>
</Grid>
<StackPanel Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right">
<Button Height="50" Width="50" Background="Transparent" Click="Button_Click">
<Image x:Name="ImageFavorit" Source="/Assets/Stern/VGrau64.png"/>
</Button>
</StackPanel>
</Grid>
Firstly you should replace your ColumnDefinitions to this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
And secondly remove HorizontalAlignment="Left" from your Grid then you can achieve to what you want:
<Grid VerticalAlignment="Center">
<Button Background="Transparent" HorizontalAlignment="Stretch">
...
Also it seems that you need to set VerticalAlignment="Center" of your StackPanel too:
<StackPanel Grid.Column="1" Grid.Row="0"
HorizontalAlignment="Right" VerticalAlignment="Center">
Update: Based on your comment that you want the text on the left side Set the HorizontalContentAlignment="Left" of the Button:
<Button Background="Transparent" HorizontalAlignment="Stretch"
HorizontalContentAlignment="Left">
I'm using Visual Studio 2013 and I wrote some code for Windows Phone 8.1 Apps in C#. Now I've got a little problem with the layout in XAML with grids.
Elements in grids should be ordered/layered in the order in the code, but this didn't work for me. I've got two grids in a grid and the comboboxlist of the first grid is overlapped by the other grid/textblock. I tried to rearrange the grid in XAML, but that also did not solved the problem.
overlapping image from the app
In this image there should be 2 more items in the open combobox list, but those are overlapped by the grid below it.
Here is the code snippet:
<Grid Margin="0, 50, 0, 0">
<Grid.RowDefinitions>
<RowDefinition Height="115"/>
<RowDefinition Height="80"/>
<RowDefinition Height="80"/>
<RowDefinition Height="115"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Third Row-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Woche:"/>
<ComboBox Name="WochenComboBox"
Grid.Column="0"
Style="{StaticResource StandardAppComboBox}"/>
<TextBlock Grid.Column="1"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Ort:"/>
<TextBox Name="OrtTextBox"
Grid.Column="1"
Style="{StaticResource StandardAppTextBox}"/>
</Grid>
<!--Second Row-->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Stunde:"/>
<ComboBox Name="StundenZeitenComboBox"
Grid.Column="0"
Style="{StaticResource StandardAppComboBox}"
ItemsSource="{Binding Einstellung, Converter={StaticResource EinstellungsStundenToComboBoxListConverter}}"
DisplayMemberPath="Value"
SelectionChanged="StundenZeitenComboBox_SelectionChanged"/>
<TextBlock Grid.Column="1"
Style="{StaticResource StandardAppHeaderTextBlock}"
Text="Veranstaltungsart:"/>
<ComboBox Name="VeranstaltungsartComboBox"
Grid.Column="1"
Style="{StaticResource StandardAppComboBox}"/>
</Grid>
</Grid>
What should I use/do to remove this overlpapping.
Use stack panels. Items inside a stack panel will not overlap.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="115" />
<RowDefinition Height="80" />
<RowDefinition Height="80" />
<RowDefinition Height="115" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Third Row-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="Woche:" />
<ComboBox Name="WochenComboBox" Grid.Column="0" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Ort:" />
<TextBox Name="OrtTextBox" Grid.Column="1" />
</StackPanel>
</Grid>
<!--Second Row-->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="Stunde:" />
<ComboBox Name="StundenZeitenComboBox" Grid.Column="0" DisplayMemberPath="Value" />
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="Veranstaltungsart:" />
<ComboBox Name="VeranstaltungsartComboBox" Grid.Column="1" />
</StackPanel>
</Grid>
</Grid>
I am attaching a image
I wanna create gap between MyTask(text) and setting image icon. I can achieve it using margin property. but when my windows phone orientation changes it looks bad. Is there a way that my setting image will always stick to right side and text on left side. how can i create gap between text and image, by avoiding fixed values.
this is my code.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Height="35" Source="/Assets/Icons/MyTasks.png"></Image>
<TextBlock Grid.Column="1" Margin="10,0,0,0" Text="MY TASKS"></TextBlock>
<Image Margin="200,0,0,0" Grid.Column="3" Height="40" Source="/Assets/Icons/Settings.png"></Image>
</Grid>
Check this sample.
This is excerpt of the Pivot template. First and third column definition must be: Width="Auto".
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image
Height="35"
HorizontalAlignment="Left"
Margin="12,0,0,0"
VerticalAlignment="Bottom"
Source="/Assets/Icons/MyTasks.png" />
<ContentControl
ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}"
Grid.Column="1"
HorizontalAlignment="Left"
Margin="0,0,0,-7"
VerticalAlignment="Center"
Style="{StaticResource PivotTitleStyle}"/>
<Image
Grid.Column="2"
Height="35"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Source="/Assets/Icons/Settings.png" />
</Grid>
I think I'm missing something simple here... how do I get a Grid inside a ScrollViewer to scroll horizontally? I've enabled HorizontalScrollMode, and the content is definitely long enough that it runs off the screen, but it doesn't scroll. Here's the offending code (this ScrollViewer is the lone content of a row of the LayoutRoot Grid):
<ScrollViewer Grid.Row="1" VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollMode="Enabled">
<Grid Margin="120,0,0,100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Download" HorizontalAlignment="Center" Margin="0,0,0,10"/>
<local:BandwidthMeter Grid.Row="1" x:Name="PolicyDown" Grid.Column="0"/>
<TextBlock Grid.Column="2" Text="Upload" HorizontalAlignment="Center"/>
<local:BandwidthMeter Grid.Row="1" x:Name="PolicyUp" Grid.Column="2"/>
<TextBlock Grid.Column="4" Text="Download" HorizontalAlignment="Center"/>
<local:BandwidthMeter x:Name="ActualDown" Grid.Row="1" Grid.Column="4"/>
<TextBlock Grid.Column="6" Text="Upload" HorizontalAlignment="Center"/>
<local:BandwidthMeter x:Name="ActualUp" Grid.Row="1" Grid.Column="6" />
<TextBlock Grid.Column="7" Text="Campus-wide bandwidth usage" HorizontalAlignment="Center"/>
<Image Grid.Column="7" Grid.Row="1" Margin="80,0,0,0" Source="[image URL]" Stretch="UniformToFill"/>
</Grid>
</ScrollViewer>
Add the property HorizontalScrollBarVisibility="Auto" to your ScrollViewer.