<Hub x:Name="Hub" x:Uid="Hub" Header="Clock +" Background="Black"
SectionsInViewChanged="Hub_SectionsInViewChanged">
<HubSection Tag="0" Name="WorldClock" x:Uid="WorldClock" Header="WORLD CLOCK"
DataContext="{Binding Groups}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" FontSize="22" >
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource SubheaderTextBlockStyle}"
Grid.Row="1" Margin="0,10,0,0" TextWrapping="Wrap"
Text="" x:Name="date_time_block"/>
</Grid>
</DataTemplate>
</HubSection>
my main concern is that in the above code there is textblock I want to know how to access that textblock in c#. I know c# but a little knew to XAML.If I put textblock outside hub section it is accessible but when I put inside hub section it is not Please help!!
Related
I have a very simple page with a header and several textboxes in my UWP app:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Page Title!" />
<ScrollViewer Grid.Row="1" VerticalScrollMode="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Margin="20" />
<TextBox Grid.Row="1" Margin="20" />
<TextBox Grid.Row="2" Margin="20" />
<TextBox Grid.Row="3" Margin="20" />
<TextBox Grid.Row="4" Margin="20" />
</Grid>
</ScrollViewer>
</Grid>
In Windows 10 mobile, when the bottom textbox get focus and soft keyboard appears, the full content of the page is scrolling up and I don't want this. I want the header to remain visible and the scrollviewer scrolls to the textbox to keep in view.
How can I achive this?
Thanks in advance.
You can use the CommandBar and add the TextBlock into CommandBar.Content, then the header will remain visible in the page. The page xaml code should look like this,
<Page.TopAppBar>
<CommandBar Background="Transparent" OverflowButtonVisibility="Collapsed">
<CommandBar.Content>
<TextBlock Text="Page Title!" Margin="20" />
</CommandBar.Content>
</CommandBar>
</Page.TopAppBar>
<Grid>
<ScrollViewer VerticalScrollMode="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Margin="20" />
<TextBox Grid.Row="1" Margin="20" />
<TextBox Grid.Row="2" Margin="20" />
<TextBox Grid.Row="3" Margin="20" />
<TextBox Grid.Row="4" Margin="20" />
</Grid>
</ScrollViewer>
</Grid>
I have a usercontrol containing a heading, a listbox and a button in the bottom.
When the listbox is filled with elements, I want the listbox to stretch to a maximium height, showing vertical scrollbars and the botton elements should be right below the listbox.
If someone resizes the window, the listbox should resize (respecting maxheight property) and show scrollbars when it needs to. I also want the save button to be right beneath the listbox and not in the bottom part of the usercontrol
I have found this to be really hard, once the listbox is filled with elements, it stretches out, no matter what.
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:system="clr-namespace:System;assembly=mscorlib"
Height="300" Width="525">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MaxHeight="150"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" MaxHeight="100">
<ListView.Items>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
</ListView.Items>
</ListView>
</Grid>
<Separator Grid.Row="2" />
<Button Grid.Row="3" Width="75" Content="Save"/>
</Grid>
</UserControl>
Your original XAML seemed to be quite strange... I'm not surprised it wasn't working. For example, you set the ListView.MaxHeight property to 100, but also set the relevant RowDefinition.MaxHeight property to 150. Perhaps you meant to do that, I don't know... either way, you just needed to use the * setting for the Height property on the ListViews RowDefinition, set some VerticalAlignment properties and remove the inner Grid that did nothing useful. Try this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading" />
<ListView Grid.Row="1" MaxHeight="100" VerticalAlignment="Top">
<ListView.Items>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
</ListView.Items>
</ListView>
<Separator Grid.Row="2" />
<Button Grid.Row="3" Width="75" Height="25" Content="Save"
VerticalAlignment="Top" />
</Grid>
UPDATE >>>
When working with Grids, just experiment with the "*" setting, which will take up all of the remaining space in the Grid. It's really not that difficult. Try this instead:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading"/>
<ListView Grid.Row="0" MaxHeight="100" VerticalAlignment="Top">
<ListView.Items>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
</ListView.Items>
</ListView>
<Separator Grid.Row="1" VerticalAlignment="Top" />
<Button Grid.Row="2" Width="75" Height="25" Content="Save"
VerticalAlignment="Top" />
</Grid>
UPDATE 2 >>>
Ok, so this should now be what you're after:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" MaxHeight="100" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading" />
<ListView Grid.Row="1" MinHeight="30" MaxHeight="100" VerticalAlignment="Top">
<ListView.Items>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
<system:Int32>0</system:Int32>
</ListView.Items>
</ListView>
<Separator Grid.Row="2" VerticalAlignment="Top" />
<Button Grid.Row="3" Width="75" Height="25" Content="Save"
VerticalAlignment="Top" />
</Grid>
I have the following example:
<Window x:Class="WpfOverlayTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue">
<Grid Margin="0,125,0,0" Height="75" Width="200" Background="Red">
<Grid Margin="0,75,0,0" Background="Black" Height="20" Width="200" />
</Grid>
</Grid>
<Grid Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
</Grid>
How can I make the Black Grid being displayed?
edit:
To make the Problem a bit more clear:
I Want to define the Black Grid inside the Red Grid, but it should be displayed over the Green Grid.
See the Red Grid as a UserControl and the Black Grid as a Menu Overlay.
Sometimes I see questions and answers here that I just can't believe. If you want to put two or more elements into one Grid.Row or Column, then just set their Grid.Row values to the same value. The lower the element is defined in the XAML, the further in front the element will be in the UI. So to add the black Grid on top of the green Grid, you can just do this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue">
<Grid Margin="0,125,0,0" Height="75" Width="200" Background="Red">
</Grid>
</Grid>
<Grid Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
<Grid Grid.Row="1" Background="Black" VerticalAlignment="Center"
Height="20" Width="200" /> <!-- This will be on top -->
</Grid>
UPDATE
It's pretty difficult to work out what you actually want, but after reading the comments, it seems as though you might want this instead:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue">
<Grid Margin="0,125,0,0" Height="75" Width="200" Background="Red">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Black" VerticalAlignment="Center" Height="20" Width="200" />
</Grid>
</Grid>
<Grid Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
</Grid>
This is basic Grid stuff. I recommend the material in the Grid Class page on MSDN.
UPDATE 2
Now that you have provided a description of your problem in your question, I can finally provide the correct XAML for your requirements:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue" />
<Grid Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
<Grid Grid.Row="1" VerticalAlignment="Center" Height="75" Width="200" Background="Red">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- This will be on top -->
<Grid Grid.Row="0" Background="Black" VerticalAlignment="Center" Height="20" Width="200" />
</Grid>
</Grid>
Set a RowDefinition on your Red grid and assign the Black Grid to it
<Canvas>
<Grid Width="600" Height="200" Background="LightBlue">
</Grid>
<Grid Margin="0,200,0,0" Height="175" Width="600" Background="LightGreen" />
<Grid Margin="200,125,0,0" Height="100" Width="200" Background="Red">
<Grid Margin="0,75,0,0" Background="Black" Height="20" Width="200" />
</Grid>
</Canvas>
EDIT: Added a screenshot
EDIT: Switched to a Canvas
now I'm using the tabcontrol to arrange my UI. At the first, I put my button outside my tabcontrol; however, when I put the button into the tabcontrol, it gave message, Object reference not set to an object instance. Does anyone know why I got this message ?
edited
Below is my xaml:
<Window x:Class="StudySystem.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="UI" Height="600" Width="811" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:my="clr-namespace:StudySystem" Loaded="Window_Loaded">
<Grid Width="791">
<Grid.RowDefinitions>
<RowDefinition Height="129*" />
<RowDefinition Height="432*" />
</Grid.RowDefinitions>
<TabControl Margin="2,0,0,42">
<TabItem Header="Book Info" >
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="178*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="22*" />
</Grid.RowDefinitions>
<TextBlock Text="Book Code:" Height="25" Margin="0,15,0,45"></TextBlock>
<TextBox Name="txtCode" Grid.Column="1" Margin="2,15,0,51"
Width="148"></TextBox>
<TextBlock Grid.Row="1" Text="Title:" Margin="0,1,0,33" Height="18"></TextBlock>
<TextBox Name="txtTitle" Grid.Row="1" Grid.Column="1" Margin="2,1,148,32" Grid.ColumnSpan="2"></TextBox>
<TextBlock Grid.Row="3" Text="Author:" Margin="0,5,0,33" Height="17"></TextBlock>
<TextBox Name="txtAuthor" Grid.Row="3" Grid.Column="1" Margin="0,6,0,30"></TextBox>
<Button Content="OK" Grid.Row="4" Grid.Column="1" Margin="0,1,0,37"></Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
I've seen this before, its code that references things in your form before you create the form. Check the order of what you are calling.
Inside Windows tag i have added this code and for me its working fine...
<Grid Width="auto">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="432*" />
</Grid.RowDefinitions>
<TabControl Grid.Row="1">
<TabItem Header="Book Info" >
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="178*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="22*" />
</Grid.RowDefinitions>
<TextBlock Text="Book Code:" Height="25" Margin="0,15,0,45"> </TextBlock>
<TextBox Name="txtCode" Grid.Column="1" Margin="2,15,0,51"
Width="148"></TextBox>
<TextBlock Grid.Row="1" Text="Title:" Margin="0,1,0,33" Height="18"></TextBlock>
<TextBox Name="txtTitle" Grid.Row="1" Grid.Column="1" Margin="2,1,148,32" Grid.ColumnSpan="2"></TextBox>
<TextBlock Grid.Row="3" Text="Author:" Margin="0,5,0,33" Height="17"></TextBlock>
<TextBox Name="txtAuthor" Grid.Row="3" Grid.Column="1" Margin="0,6,0,30"></TextBox>
<Button Content="OK" Grid.Row="4" Grid.Column="1" Margin="0,1,0,37"></Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
what you have mentioned in window_loaded??
I have a scenario where i have one control, which is using another control thru ListBox.ItemTemplate. I need to share Height and width between these 2 controls. How can we achieve that?
Main Conrol Xaml looks like as followings:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Text="{Binding Path=Caption,
Mode=OneWay}" />
<TextBlock Grid.Row="1"
Text="{Binding Path=Caption2,
Mode=OneWay}" />
</Grid>
<ListBox Grid.Row="0"
Grid.Column="1"
ItemsSource="{Binding Path=ViewModels}">
<ListBox.ItemTemplate>
<DataTemplate>
<Views:View2 />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
View2 xaml looks like as following:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="{Binding Path=Value,
Mode=OneWay}"/>
<TextBlock Text="{Binding Path=Value2,
Mode=OneWay}"
Grid.Row="1"
Grid.Column="0"
/>
</Grid>
You can synchronize row height and column width using Grid.IsSharedSizeScope and the SharedSizeGroup attribute on ColumnDefinition and RowDefinition.
I'm not sure which elements you need to synchronize in your Xaml, but an example might be as follows:
Ia a parent element you use Grid.IsSharedSizeScope="True"
<Grid IsSharedSizeScope="true">
..
</Grid>
This synchronizes any columns (or rows) that have the same SharedSizeGroup within that scope (you can have multiple nested scopes).
So if your view.xaml looks like this
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="column1"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Path=Value, Mode=OneWay}"/>
<TextBlock Text="{Binding Path=Value2, Mode=OneWay}" Grid.Row="1" Grid.Column="0"/>
</Grid>
Then all the textblocks will have the same width.