Get to a XAML control by name in a DataTemplate - xaml

I have a ListView with a custom DataTemplate.
<ListView ItemTemplate="{StaticResource MyTemplate}"
ItemsSource="{Binding Items}"
SelectionChanged="list_SelectionChanged" />
<DataTemplate x:Key="MyTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SECTextBox x:Name="myTextBox" Text="Test"/>
</Grid>
</DataTemplate>
How can I select myTextBox for the selected item when the user changes the item in the listview?
Thanks
This is using a windows 8.1 store application.

One way is Tapped event on your SecTextBox, or Grid....
<ListView ItemTemplate="{StaticResource MyTemplate}"
ItemsSource="{Binding Items}"
SelectionChanged="list_SelectionChanged" />
<DataTemplate x:Key="MyTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SECTextBox x:Name="myTextBox"
Text="Test"
Tapped="HandleOnTapped"/>
</Grid>
</DataTemplate>
private void HandleOnTapped(object sender, TappedRoutedEventArgs e)
{
SECTextBox txt = (SECTextBox)sender;
// now you have your textbox
}

Related

How to dynamically update ListView height while keeping the ScrollViewer enabled?

ListView is placed inside UserControl which is set in parent XAML to asterix "*" height.
I want to use ListView with possibility to scroll items, when there are items that exceed ListView. It should work for different size of window.
It works fine when I set Grid's RowDefinitions with fixed integer, but when I try to use asterix "*" ScrollViewer disables.
I also tried to bind and update RowDefinition's height via some code behind in overriden MeasureOverride method, but it didn't work as expected.
Here is code inside my UserControl:
<Grid x:Name="ContentArea"
Background="{StaticResource MixerBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="{x:Bind ListViewHeight}" />
</Grid.RowDefinitions>
<ListView
ItemsSource="{x:Bind ViewModel.Source,Mode=TwoWay}"
CanDragItems="True"
CanReorderItems="True"
AllowDrop="True"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Track">
<Grid
Background="LightGray"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
BorderBrush="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<TextBlock
Text="{x:Bind Id}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="24"
Margin="20,5,20,5"/>
<Grid
Background="Black"
Width="500"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1">
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I expect to get the ScrollViewer working correctly, but ListView stay at the old size or scroll bar is disabled - depending on Height value.
Is there any way to achieve dynamically resizing ListView with scroll?
Edit
Here is parent Page XAML code which is loaded into Frame via Light MVVM framework:
<Grid
x:Name="ContentArea">
<Grid
Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height="300" />
</Grid.RowDefinitions>
<maineditor:MainEditorMenuControl x:Name="ProjectMenu" />
<maineditor:MainEditorWorkspaceControl x:Name="Workspace" Grid.Row="1"/>
<maineditor:MainEditorMixerControl x:Name="Mixer" Grid.Row="2" />
</Grid>
</Grid>
Edit 2
I think the problem may be connected with MVVM template I've created with Windows Template Studio plugin for Visual Studio. If I try to recreate minimal solution from scratch with all properties 1:1 as in my app it works in fresh project, but not in mine.
How to dynamically update ListView height while keeping the ScrollViewer enabled?
If you want make RowDefinition height same as the ListView, you could give the ListView a name and use {Binding ElementName=MyListView,Path=ActualHeight}syntax to bind both height property.
<Grid x:Name="ContentArea">
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=MyListView,Path=ActualHeight}" />
</Grid.RowDefinitions>
<ListView
Name="MyListView"
CanDragItems="True"
CanReorderItems="True"
AllowDrop="True"
Loaded="MyListView_Loaded"
SelectionMode="Single"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemTemplate>
<DataTemplate >
<Grid
Background="LightGray"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
BorderBrush="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<TextBlock
Text="{Binding}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontSize="24"
Margin="20,5,20,5"/>
<Grid
Background="Black"
Width="500"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1">
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>

In Win10 application using two webview not able to see content if i dont give minHeight to control?

Below is the code snippet:-
In Below code I am Using two web view control and binding the HTML content by using custom property. Here I want that Web-view content should be displayed without any scroll and automatically fit to grid according to content size.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<ResourceDictionary>
<CollectionViewSource x:Name="HtmlSource"/>
</ResourceDictionary>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Background="#fffff0">
<TextBox x:Name="TxtHtmlInput" Width="800" TextWrapping="Wrap" HorizontalAlignment="Left" Height="250"></TextBox>
<Button Margin="10,0,0,0" x:Name="COnvert" HorizontalAlignment="Center" Content='HTML TO TEXT' Tapped="COnvert_Tapped"></Button>
</StackPanel>
<WebView Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Width="Auto" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" x:Name="customWebView" webViewer:MyExtensions.HTML="{Binding Source={StaticResource HtmlSource}, Path=HTML}">
</WebView>
<Grid Height="Auto" Grid.Row="2" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<WebView Height="Auto" Width="Auto" x:Name="customWebView1" webViewer:MyExtensions.HTML="{Binding Source={StaticResource HtmlSource}, Path=HTML}"></WebView>
</Grid>
</Grid>

Hub alignment inside other element

How do I make Hub to fill the rest of space? Not less and not more. In case of longer Listview the Hub ends below screen.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<controls:PageHeader Content="Main Page">
<controls:PageHeader.SecondaryCommands>
…
</controls:PageHeader.SecondaryCommands>
</controls:PageHeader>
<Hub>
<HubSection>
<DataTemplate>
<ListView>
…
</ListView>
</DataTemplate>
</HubSection>
<HubSection>
…
<HubSection>
</Hub>
</Grid>
Try this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<controls:PageHeader Content="Main Page">
<controls:PageHeader.SecondaryCommands>
…
</controls:PageHeader.SecondaryCommands>
</controls:PageHeader>
</StackPanel>
<Grid Grid.Row="1">
<Hub>
<HubSection>
<DataTemplate>
<ListView>
…
</ListView>
</DataTemplate>
</HubSection>
<HubSection>
…
<HubSection>
</Hub>
</Grid>
</Grid>

Windows phone Horizontal Listbox image center-lock

I have a ListBox with images as items, I need each image to take the full width of the screen, and to be center-locked (like ViewPager in android)
this is what I have so far:
<Grid x:Name="ContentPanel" Grid.Row="1" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListBox Grid.Row="1" ItemsSource="{Binding Zones[0].listBannieres}" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding banniere}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
thank you.
SOLVED
<phone:PivotItem Header="Zone 1" Margin="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" VerticalAlignment="Bottom" >
<phone:Pivot ItemsSource="{Binding Zones[0].listBannieres}">
<phone:Pivot.HeaderTemplate>
<DataTemplate />
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemContainerStyle>
<Style TargetType="phone:PivotItem">
<Setter Property="Margin" Value="0"/>
</Style>
</phone:Pivot.ItemContainerStyle>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding banniere}"/>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
</StackPanel>
</Grid>
</phone:PivotItem>
I would recommend using Pivot as suggested in the comments or a Panorama control, if you place those inside another control, you can have them visible at the bottom only. Here is an example with pivot:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<phone:Pivot Grid.Row="1" ItemsSource="{Binding Images}" Margin="0">
<phone:Pivot.HeaderTemplate>
<DataTemplate></DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemContainerStyle>
<Style TargetType="phone:PivotItem">
<Setter Property="Margin" Value="0" />
</Style>
</phone:Pivot.ItemContainerStyle>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImagePath}" Stretch="Fill" />
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
</Grid>
Here only the bottom part is scrolled to as you wanted. It will also "snap" to the images when scrolling, which I also think the Android viewpager does. :)
If you instead change Pivot to Panorama and PivotItem to PanoramaItem you can get another nice result, where you see a small part of the next image. Here is an image of the result:
Edit: To remove the margin and headers, make sure you set the HeaderTemplate to an empty one and the Margin on PivotItem to 0. See the updated code above.

Issue with XAML layout

I've got the following XAML:-
<Grid Width="400" Height="400">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading" />
<ListBox Grid.Row="1" ItemsSource="{Binding Foo}"
Margin="0,12,0,12" />
<Button Grid.Row="2" Content="Button"
VerticalAlignment="Top" HorizontalAlignment="Left" />
</Grid>
This simply displays a heading, a listbox, and a button immediately below the listbox. As the number of items in the listbox grows, the button gets pushed down, however the listbox will keep growing and eventually disappear off the bottom of the window, taking the button with it.
Instead, I would like the listbox to grow until the button hits the bottom of the window. At this point the listbox shouldn't grow any further, and instead display scrollbars to scroll the list. What am I missing?
Edit:
I've just come up with the following, which seems to do the trick. Not sure if there is a more elegant solution though?
<Grid Width="400" Height="400">
<Grid.RowDefinitions >
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading" />
<DockPanel Grid.Row="1" LastChildFill="True" VerticalAlignment="Top">
<Button DockPanel.Dock="Bottom" Content="Button"
VerticalAlignment="Top" HorizontalAlignment="Left" />
<ScrollViewer VerticalScrollBarVisibility="Auto" Margin="0,12,0,12">
<ListBox ItemsSource="{Binding Foo}" />
</ScrollViewer>
</DockPanel>
</Grid>
You need to limit the height of the grid row containing your ListBox to some fixed height to stop it taking up whatever vertical height it likes. I'm away from an IDE to test but you may also need to set the VerticalScrollBarVisibility on the ListBox to Auto.
<Grid Width="400" Height="400">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Heading" />
<ListBox Grid.Row="1" ItemsSource="{Binding Foo}"
Margin="0,12,0,12" />
<Button Grid.Row="2" Content="Button"
VerticalAlignment="Top" HorizontalAlignment="Left" />
</Grid>