I've created a new project from the Grid App (XAML) template (C# Windows Store).
So far I've changed nothing in the template, but I would like to change the backgroundcolor from a specific row in the grid.
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
I would like to change the backgroundcolor from row 0 (which contains the page title).
Any ideas?? Thanks in advance!
This row consits of:
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
You can't set the background color on the Grid.Row itself, instead set the Background property on whatever occupies this row.
For example
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Red" Grid.Row="0">
<TextBlock>Test</TextBlock>
</Grid>
</Grid>
EDIT:
Updated for Silverlight; TextBlock doesn't have Background so you have to put the control in another Border or grid container which does have background. Code updated to reflect this.
How about inserting border where you need it
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Background="Red" Grid.ColumnSpan="1"></Border>
<TextBlock>Test</TextBlock>
<Border Background="blue" Grid.Row="1" Grid.ColumnSpan="1"></Border>
<TextBlock Grid.Row="1">Test2</TextBlock>
</Grid>
note that you can especify the columns span in case of include more columns
Related
I have the following scenario:
<Grid x:Uid="Grid_3" Grid.Row="0" Margin="5" Focusable="False" Visibility="Visible" Background="DarkGray" Opacity="0.4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition x:Uid="RowDefinition_8" Height="Auto"/>
<RowDefinition x:Uid="RowDefinition_9" Height="Auto"/>
</Grid.RowDefinitions>
<controls:LoadingPanel Grid.Row="0" IsLoading="True"
HorizontalLoadingIndicatorAlignment="Center"
VerticalLoadingIndicatorAlignment="Center"
/>
<TextBlock x:Uid="TextBlock_4" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Commit In Process..." />
</Grid>
</Grid>
I want the LoadingPanel and the TextBlock to be aligned in the center of the Grid which I have set to be stretched vertically and horizontally.
Note that the grid is already inside another grid. At the moment both places themselves at the top.
So, I'm guessing the issue you're seeing is that the controls are not centred vertically but instead sit at the top of the grid?
To resolve this (while keeping the controls below one another) simply add a relative sized row above and below the two rows for the controls like so:
<Grid x:Uid="Grid_3" Grid.Row="0" Margin="5" Focusable="False" Visibility="Visible" Background="DarkGray" Opacity="0.4" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition x:Uid="RowDefinition_8" Height="Auto"/>
<RowDefinition x:Uid="RowDefinition_9" Height="Auto"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<controls:LoadingPanel Grid.Row="1" IsLoading="True"
HorizontalLoadingIndicatorAlignment="Center"
VerticalLoadingIndicatorAlignment="Center"
/>
<TextBlock x:Uid="TextBlock_4" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Commit In Process..." />
</Grid>
This should sort out the issue.
Just to be able to give an answer to this topic, I am reposting the comment from above, to allow #DSF to accept it.
Apparently the issue was related to the fact that the grid had two rows, and each control was on it`s own row. Discarding the rows solved his issue.
To fix the order of visibility, as you want, use Panel.ZIndex="2" on the LoadingPanel and Panel.ZIndex="1" on the TextBlock, like this
I am using third party tool (AxInterop.EDOfficeLib dll) to show excel sheet in WPF user control. By using this sheet user can create custom report.
Following is my XAML :
<DockPanel Margin="0,0,0,0" LastChildFill="False" Name="PanelCustomeReport">
<StackPanel>
<Grid Background="{DynamicResource OMSToolBarBlueGradientBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.Column="0">
<WindowsFormsHost>
<edrawOffViewer:AxEDOffice x:Name="framer" NotifyCtrlReady="framer_NotifyCtrlReady"/>
</WindowsFormsHost>
</ScrollViewer>
</Grid>
</StackPanel>
</DockPanel>
Problem :
When i resize the form in running mode WindowsFormHost control not set its height and width accordingly.
For more clear view please refer snapshot :
As you can see in the snapshot green line is the end of the grid but windowformhost exceed as red line. How i can restrict it with in the Grid only.
If more information need please let me know. I will try to provide it.
you can use the ViewBox here it may help you.
<Viewbox>
<DockPanel Margin="0,0,0,0" LastChildFill="False" Name="PanelCustomeReport">
<StackPanel>
<Grid Background="{DynamicResource OMSToolBarBlueGradientBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.Column="0">
<WindowsFormsHost>
<edrawOffViewer:AxEDOffice x:Name="framer" NotifyCtrlReady="framer_NotifyCtrlReady"/>
</WindowsFormsHost>
</ScrollViewer>
</Grid>
</StackPanel>
</DockPanel>
</Viewbox>
I really need your help now. I´ve tried a few thousands solutions, but nothing worked for me. This is a part of a page built with Microsoft Visual Studio 2013 for Windows. I want to make to make the Slider (named slider_1) responsive, so it should fill the rest of the page regardless the Screen Solution (cannot use fixed Heights):
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid Grid.Row="0">
.........
</Grid>
<Grid Grid.Row="1" Name="secGrid">
<GridView x:Name="source">
<GridViewItem x:Name="item_1">
<Grid x:Name="container_1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" x:Name="name_1" Height="39" Text="123"></TextBlock>
<Button Grid.Row="1" x:Name="toggle_on_1" Content="ON"></Button>
<Slider Grid.Row="2" x:Name="slider_1" Orientation="Vertical" VerticalAlignment="center" HorizontalAlignment="center"/>
<Button Grid.Row="3" x:Name="toggle_off_1" Height="39" Content="OFF"></Button>
</Grid>
</GridViewItem>
</GridView>
</Grid>
Thought I could get it to work by binding the Height of the Slider to the ActualHeight of the "secGrid", but this is not suitable for my purpose, even if it seemed to work well in combination with a converter:
<Slider Grid.Row="2" x:Name="slider_1" Orientation="Vertical" VerticalAlignment="center" HorizontalAlignment="center" Height="{Binding ActualHeight, ElementName=secGrid}"/>
Tried to set VerticalAligment/VerticalContentAligment to "Stretch", but it did not work.
Its important that it is responsive to other Screen Solutions.
Can anybody help me? Do I have to use another type of Element besides the inner Grid named container_1? This is driving me crazy....
PS: Sorry for mistakes in language. I´m german :)
Your Auto sizing grid creates problem for slider scaling as Auto means "size to row content", and * means "size proportional to grid".
Auto means that a row is given as much height as the elements within it require.
The height of * sized row is calculated by allocating space for the auto, and fixed height rows, and then dividing up the remaining space.
below code works fine if I set height to rowdefination 2 or if I set height to grid
<Grid>
<GridView x:Name="source">
<GridViewItem x:Name="item_1" >
<Grid x:Name="container_1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" x:Name="name_1" Height="39" Text="123"></TextBlock>
<Button Grid.Row="1" x:Name="toggle_on_1" Content="ON"></Button>
<Slider Grid.Row="2" x:Name="slider_1" Orientation="Vertical" HorizontalAlignment="center"/>
<Button Grid.Row="3" x:Name="toggle_off_1" Height="39" Content="OFF"></Button>
</Grid>
</GridViewItem>
</GridView>
</Grid>
OK, I'm having issues properly using a ScrollViewer (containing an ItemsControl) inside a StackPanel.
The thing is the scrolling works, however :
No matter how much the user scrolls down, the bottom lines of the tables are not visible
When scrolling is... "released", the table pops back up...
<ScrollViewer Height="Auto">
<ItemsControl ItemsSource="{Binding Items, Mode=TwoWay}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top" Margin="0,0,0,0" x:Name="ResTable">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.10*"/>
<ColumnDefinition Width="0.30*" />
<ColumnDefinition Width="0.30*"/>
<ColumnDefinition Width="0.30*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Text="{Binding [num]}" HorizontalAlignment="Center" />
<TextBlock Grid.Column="1" Text="{Binding [A]}" HorizontalAlignment="Center" />
<TextBlock Grid.Column="2" Text="{Binding [B]}" HorizontalAlignment="Center" />
<TextBlock Grid.Column="3" Text="{Binding [C]}" HorizontalAlignment="Center" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Any ideas?
P.S.
I've had a look at some of the other answers to similar issues, but none seems to be working...
My main idea is to display a table, with a fixed header, and scrollable contents (populated via Bindings) - ok, and there are also a couple of things on the top of the page (apart from the table I mean)
I guess the issue is that you should probably use parent element like Grid, not StackPanel, because StackPanel has its drawbacks when resizing child items with scrolls and so on.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Put headers in Grid.Row="0" -->
<!-- Put Scrollviewer in Grid.Row="1" -->
</Grid>
Also Height="Auto" attribute can be removed from ScrollViewer, you might want to use VerticalAlignment="Stretch" for item to take all the available space. I hope this is what you are trying to achieve.
I got a ListView (wrapped in a ScrollViewer), which resizes itself if the elements inseretd exceed the visible area until the parents Max Height is reached.
The ListView is embedded the following way.
<Window ... SizeToContent="Height">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="MyScrollViewer" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ListView Name="MyListView"
ItemsSource="{Binding Path=RetrievalStringResults, Mode=OneWay}"
IsSynchronizedWithCurrentItem="True" />
</ScrollViewer>
<DockPanel Grid.Row="0" Grid.Column="1">
...
</DockPanel>
<Expander Grid.Row="1" Grid.ColumnSpan="2">
<DockPanel Height="150" HorizontalAlignment="Stretch">
<TextBox DockPanel.Dock="Top" />
</DockPanel>
</Expander>
<DockPanel Grid.Row="2" Grid.ColumnSpan="2">
... some buttons
</DockPanel>
</Grid>
</Window>
I used SizeToContent because I got a text box on the bottom wrapped in an Expander, which shall expanded on demand, and actually therefore my main window needs to resize. This actually works fine.
The problem is though the ListView's Height isn't the max height on start-up wherefore I got that "auto-resize" effect.
How can I set the ListView's hight to the max of the parents height to avoid this effect?
Another, more general issue. I think avoiding static layout parameters (static values for hight/width) is nice, but I got the feeling I'm loosing some control over my UI controls.
I recognized, resizeing my main window manually in height, it "jumps" by the 150 height of the DockPanel wrapped by the Expander on the bottom, anyway to avoid this?
What is the best pratice in dynamic UI Layout? I explored DockPanel beeing more dynamically in sizing to the surounding contorls than a StackPanel. But I guess thats not everything.
I think your issue is with your Grid definitions
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
...
</Grid>
This means that the top row is going to be twice the size of rows 2 and 3, so the top row will only take up 50% of your space while your bottom two rows each take up 25% space.
If you want the top row to take up all available space, make sure it is the only * size row, and set the other rows to Auto so they will take up whatever space they need.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
...
</Grid>