I have a UserControl:
<UserControl x:Class="WP8.Progress"
..................................
d:DesignHeight="800" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Rectangle Stretch="Fill" Opacity="0.75" Fill="DarkGray"/>
<StackPanel x:Name="stackPanel" Orientation="Vertical" VerticalAlignment="Center">
<ProgressBar Foreground="Blue" IsIndeterminate="True"/>
</StackPanel>
</Grid>
</UserControl>
I call UserControl in MainPage:
<phone:PhoneApplicationPage
x:Class="WP8.MainPage"
..................................
mc:Ignorable="d"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Black">
<Grid>
<Button Name="btnButton" Content="OK" Click="btnButton_Click"/>
</Grid>
<Grid>
<uc:Progress />
</Grid>
</Grid>
</phone:PhoneApplicationPage>
When i run app, i see UserControl upper MainPage but i still pressed button at MainPage.
How do i only action at UserControl?
I got your question i have done the same thing in my App when you are opening the UserControl set your LayoutRoot.IsHitTestVisible="False" and after then the user has done on the usercontrol or usercontrol is closed then set it as true. And you can also do some opacity or visibility changes if you want with the grid.
Related
I've put a WebView inside of a FlipViewItem. The problem seems to be that in WP 8.1, the WebView does not get the gestures (presumably because they're absorbed by the FlipView). The desired result is to be able to scroll vertically and tap in the WebView but also to be able scroll horizontally for the FlipView (even if just in a limited area on the horizontal edges). Is there any solution or workaround for this?
<StackPanel>
<StackPanel Name="postTitle" Background="Transparent">
<TextBlock Name="ContentArea" Text="" FontSize="18" Margin="10, 5, 10, 0" TextWrapping="WrapWholeWords" FontWeight="Bold" Foreground="White"/>
<TextBlock Name="SubArea" Text="" FontSize="16" Margin="10, 0, 10, 10" TextWrapping="WrapWholeWords" Foreground="White"/>
</StackPanel>
<FlipView Name="swipeArea" Height="460" Margin="0" Padding="0" SelectedIndex="1" SelectionChanged="swipeArea_SelectionChanged">
<FlipViewItem Name="oneItem">
</FlipViewItem>
<FlipViewItem Name="mainFlipViewItem">
<Grid>
<ProgressRing Name="progRing" Foreground="White" Margin="0,25,0,0" Background="Transparent" Visibility="Collapsed" VerticalAlignment="Top"/>
<WebView Name="InterWindow" Height="460" Visibility="Collapsed" DefaultBackgroundColor="#5E5E5E"></WebView>
<ScrollViewer Name="Scrollster" ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="8" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Name="WebWindow" Height="420" HorizontalAlignment="Center" VerticalAlignment="Top">
</Image>
</ScrollViewer>
</Grid>
</FlipViewItem>
<FlipViewItem Name="threeItem">
</FlipViewItem>
</FlipView>
</StackPanel>
I believe I just found one workaround. I've added this to the WebView control:
Canvas.ZIndex="1000"
I can then set the width of the WebView control to something just slimmer than the FlipView itself, and then I should be good.
I have a windows 8.1 store app and I can't figure out how to get the datacontext to access my viewmodel for a relaycommand. The xaml works all the way up to the flyout and then it fails. So the button with content "buttonWorks" successfully gets the binding from the rootGrid element and calls the command on the viewmodel. But the button right below in the flyout does not. Why?
To make an example of the binding problem, create a new Store App with the Split App template. Then add a flyout to the SplitPage and bind a textbox text to the itemtitle element. The binding will not populate the flyout textbox. The code snippet looks like this:
<Image Source="{Binding ImagePath}" Grid.Row="1" Margin="0,0,20,0" Width="180" Height="180" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
<TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Subtitle}" Style="{StaticResource SubtitleTextBlockStyle}"/>
<Button Content="Update">
<Button.Flyout>
<Flyout>
<StackPanel>
<StackPanel Margin="5" Orientation="Vertical" >
<TextBlock Text="Item Title" VerticalAlignment="Bottom"/>
<TextBox Text="{Binding ElementName=itemTitle,Path=Text,Mode=TwoWay}" Width="200" />
</StackPanel>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
</StackPanel>
I can get the command binding to work using Dani's answer and setting the datacontext on the button hosting the flyout like this, but I can't bind the textboxes as seen in the template example above
<Button Content="Update" HorizontalAlignment="Center" DataContext="{Binding ViewModel, ElementName=pageRoot}" >
<Button.Flyout>
<Flyout>
<StackPanel>
<TextBlock Text="Item Title" VerticalAlignment="Bottom"/>
<TextBox Text="{Binding ElementName=itemTitle,Path=Text,Mode=TwoWay}" Width="200" />
<Button x:Name="buttonTest" Margin="5" Height="40" Content="Test" HorizontalAlignment="Center" Command="{Binding UpdateMatchDataCommand}"/>
Original Code Example Problem:
<Grid Name="rootGrid" Tag="{Binding}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
....
<ScrollViewer
x:Name="itemDetail"
AutomationProperties.AutomationId="ItemDetailScrollViewer"
Grid.Row="0"
Grid.Column="1"
Grid.RowSpan="2"
Padding="60,0,66,0"
HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
DataContext="{Binding SelectedItem, ElementName=itemListView}"
<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="0,0,10,0" Width="180" Height="180">
<Button Name="buttonWorks" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand,ElementName=rootGrid}"/>
<Button Content="Update" HorizontalAlignment="Center" >
<Button.Flyout>
<Flyout>
<Button Name="buttonFail" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand,ElementName=rootGrid}"/>
</Flyout>
</Button.Flyout>
</Button>
</StackPanel>
....
If you work with ViewModels I would suggest that you change the DataContext to your page.
<Page
x:Name="rootPage"
DataContext="{Binding ViewModel, RelativeSource={RelativeSource Self}}"
...
And CodeBehind:
private readonly ViewModel _viewModel = new ViewModel();
public ViewModel ViewModel
{
get { return _viewModel; }
}
Now you can change your commands to:
<Button Name="buttonWorks" Content="Test" Command="{Binding Tag.UpdateMatchDataCommand}"/>
ElementName is now only necessary if you bind to a property in code behind.
It ends up that I could never solve the problem using the binding that the template provides. It appears to me that changing the datacontext of a single element in the flyout is not allowed. So, the way I got around it is to create a selected item in the viewmodel and changed the template code to bind to the selected item on view model. Then bind all elements including the command to the same datacontext for the entire form.
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="-10,-10,0,0"
Padding="120,0,0,60"
ItemsSource="{Binding Matches}"
SelectedItem="{Binding SelectedMatch, Mode=TwoWay}"
IsSwipeEnabled="False">
<ListView.ItemTemplate>
<DataTemplate>
Now the binding works for all fields including the template.
I have problem with AppBarUtils, Eariler I have command in my appBar and when it run. However something broke. My Main.xaml
<phone:PhoneApplicationPage
x:Class="OsiągnijCelPhoneApp.Views.Main"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:appBarUtils="clr-namespace:AppBarUtils;assembly=AppBarUtils"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
DataContext="{Binding Source={StaticResource Locator}, Path=Main}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="login"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<!--<i:Interaction.Behaviors>
<appBarUtils:AppBarItemCommand Id="login" Command="{Binding LoginIn,Mode=TwoWay}"/>
</i:Interaction.Behaviors>-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Margin="25,0,0,355" Content="Zaloguj" Command="{Binding LoginIn,Mode=TwoWay}" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>
I use Telerik, MVVM light, and AppBarUtils. I preinstalled AppBarUtils.
When I deploy my on phone, that I got
A first chance exception of type 'System.Windows.Markup.XamlParseException' occurred in System.Windows.ni.dll Additional information: Unknown parser error: Scanner 2148474880. [Line: 25 Position: 29]
I think that it is problem with System.Windows.Interactive, because if I comment it, rest run.I debug on arm.
You havent set the interaction triggers. See this example http://allenlooplee.wordpress.com/2011/08/26/how-to-do-command-binding-for-application-bar-with-appbarutils-in-xaml/
I have placed a Progress Bar control within my MainPage.xaml. The application type is Pivot.
For some reason, the Progress Bar and a TextBlock which I have placed within a PivotItem and below a Grid are not showing. There is a LongListSelector directly beneath these two controls. Are these two controls not showing because of that? I used the UI to drag the LongListSelector beneath then anyway, so I'm not sure why it's not showing.
This is the XAML:
<phone:Pivot Title="Title" Background="White" Foreground="Black">
<!--Pivot item one-->
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" Margin="0,0,0,579"/>
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" Margin="0,24,0,541" />
<phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" Margin="0,62,0,0">
<phone:LongListSelector.ItemTemplate>
...
...
...
As you can see, there is a ProgressBar and a TextBlock above the LongListSelector who are also inside the Grid control.
Any ideas why these two controls are not showing?
I think you have something wrong with Margin or item positioning. I've tested code below and it works:
<phone:Pivot Title="Title" Background="White" Foreground="Black">
<!--Pivot item one-->
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" VerticalAlignment="Center" Margin="0"/>
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black"
HorizontalAlignment="Center" Text="Something"/>
</StackPanel>
<phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" Margin="0,62,0,0"/>
</Grid>
</phone:PivotItem>
</phone:Pivot>
Remove margin of all child element of StackPanel. This will defiantly helps you.
<phone:Pivot Title="Title" Background="White" Foreground="Black">
<!--Pivot item one-->
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<StackPanel>
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True"/>
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" />
<phone:LongListSelector Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" >
<phone:LongListSelector.ItemTemplate>
</StackPanel>
</Grid>
</phone:PivotItem>
</<phone:Pivot>
Hardcoding control's position (especially by dragging controls in designer) is not a good practice. Try to define rows for your Grid, then specify Grid.Row for controls inside the Grid. With that you can arrange Grid content more neatly. Check this link for more sample and explanation about layouting controls inside Grid. Following is an example for your situation :
<phone:PivotItem Header="Header" Foreground="Black">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<ProgressBar Name="progressBar" Value="0" IsIndeterminate="True" />
<TextBlock Name="txtLastUpdated" FontWeight="Black" FontStyle="Italic" Foreground="Black" />
</StackPanel>
<phone:LongListSelector Grid.Row="1" Name="llsLocations" ItemsSource="{Binding}" SelectionChanged="LongListSelector_OnSelectionChanged" >
<phone:LongListSelector.ItemTemplate>
...
...
<StackPanel x:Name="LayoutRoot" Background="Transparent" >
<TextBlock Margin="20,20,0,0" Text="Type Text Here" HorizontalAlignment="Left"/>
<TextBox x:Name="SearchTextBox" IsReadOnly="False" HorizontalAlignment="Left" Margin="20,5,0,0" Height="70" Width="400" dp:TextBoxOnTextChangedDependency.UpdateSourceOnChange="True" Text="{Binding SearchBoxText, Mode=TwoWay}" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<cmd:EventToCommand PassEventArgsToCommand="True"
Command="{Binding ElementName=SearchTextBox, Path=DataContext.SearchTextBox_TextChangedCommand}"
/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<Grid x:Name="LayoutList" Background="{StaticResource PhoneChromeBrush}">
<toolkit:LongListMultiSelector x:Name="treksLocationItems" Background="Transparent"
ItemsSource="{Binding Path=TreksLocationItems}">
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Width="110" Height="150" Source="{Binding PictureFilename}" VerticalAlignment="Top"/>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="12,-12,12,6"/>
<TextBlock Text="{Binding ShortDescription}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Address:" Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Path=StreetName}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Site:" Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Path=Website}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
</StackPanel>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand Command="{Binding Path=DataContext.TapCommand, ElementName=searchItems}" CommandParameter="{Binding Path=Id}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Grid>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
</StackPanel>
I have this code in XAML, a textbox for search and a multi line select list. The problem is that the multiLineList is not scrollable even if there are many items. If I remove the stackpanel and the textblock and textbox, the list works ok with scroll enabled. Any suggestion?
Try adding a ScrollViewer above your grid.
<ScrollViewer>
<Grid x:Name="LayoutList" ....>
...
</Grid>
</ScrollViewer>
Or you could probably replace your Grid with a ScrollViewer if you're not using it to position your elements.
Wraping LLMS in a ScrollViewer will destroy the item virtualization and throw an OutOfMemoryException if the collection is too long.
Expose the LLMS' inner LongListSelector, then use the ScrollTo() method to scroll to the item u want.
LongListMultiSelector llms = LongListMultiSelector as LongListMultiSelector;
if (llms != null && llms.ItemsSource.Count > 0)
{
llms.InnerLongListSelector.ScrollTo(llms.ItemsSource[llms.ItemsSource.Count - 1]);
}
I've encountered this weird issue and found an easy solution.
It happens for both Longlistselector and LonglistMultiselector.
When you have several controls in one page, you need to set the height of selector's row to "*" instead of "Auto" in order to make the scrolling function to work correctly.
For example :
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> //Row def for another row
<RowDefinition Height="*"/> //Row def for your selector
</Grid.RowDefinitions>
If the RowDefinition Height not set to "*" but "Auto", scrolling for Longlistselector will not response to user's action.