0Hi
I have a shell in which i have a region "MainContentRegion" set. In that region i load this view:
<UserControl x:Class="CustomControls.MainContent"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cal="http://www.codeplex.com/CompositeWPF">
<Border BorderThickness="1" BorderBrush="Black" Margin="2">
<Grid x:Name="ContentGrid" Background="{StaticResource MainContentBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="55" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl Name="MainContentHeaderRegion" cal:RegionManager.RegionName="MainContentHeaderRegion" Grid.Row="1"/>
<ContentControl Name="MainContentBodyRegion" cal:RegionManager.RegionName="MainContentBodyRegion" Grid.Row="2"/>
</Grid>
</Border>
</UserControl>
When trying to access the 2 new added regions i get an error and after looking up the loaded regions i only see the regions added from the shell. Can someone help?
If the view containing the nested regions is loaded more than once that could cause an error as the nested regions would no longer be unique - in which case you should use a scoped region - see doc
Related
I have a Grid with a few Rows defined. Within one of those rows is a single ScrollView. That ScrollView has a Grid with a single Image inside that's used as a sort of BackGround Image for one section. No matter what I do I cannot get the Image to Fill, AspectFill or AspectFit inside the Parent Grid (I have also tried a StackView to no avail). If I eliminate the ScrollView and pull the Grid and Image out the Image will Fit or Fill just fine.
Here is a stripped down example of what I'm doing:
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition Height="4"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0"> ... </Grid>
<Grid Grid.Row="1"> ... </Grid>
<ScrollView Orientation="Vertical" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" Grid.Row="2">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<!-- THIS IMAGE WILL NOT FILL! -->
<Image Source="{local:EmbeddedImage Project.Mobile.Images.fieldBackground.png}" Aspect="Fill" />
</Grid>
... More Code ...
</ScrollView>
</Grid>
No matter what I do the Image will not Fill the Grid Parent. If I remove the ScrollView it works just fine like this but I cannot do this without a ScrollView because I have more content directly below that cannot fit on the screen.
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition Height="4"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0"> ... </Grid>
<Grid Grid.Row="1"> ... </Grid>
<Grid Grid.Row="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<!-- THIS IMAGE FILLS FINE! -->
<Image Source="{local:EmbeddedImage Project.Mobile.Images.fieldBackground.png}" Aspect="Fill" />
</Grid>
</Grid>
As a workaround I attempted to not aspect fit/fill the image but to anchor it at the top of the Grid and let it fill horizontally. But I cannot get the image to fit any other way inside the Grid besides centered vertically no matter what I try. If I make the Grid the exact height of the image it almost works but it looks different between iOS and Android. This seems like such a simple thing? What am I missing? I've wasted hours on this so far.
Thanks,
Any help is appreciated!
I would put the background image outside (below) the scrollview.
If you put both elements inside the same row/column in a grid, they will overlap.
The first child is at the back of the Z stack, the second child is placed above it, and so on.
<Grid ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition Height="4"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0"> ... </Grid>
<Grid Grid.Row="1"> ... </Grid>
<Image Grid.Row="2" Source="{local:EmbeddedImage Project.Mobile.Images.fieldBackground.png}" Aspect="Fill" />
<ScrollView Orientation="Vertical" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" Grid.Row="2">
... Insert your elements here ...
</ScrollView>
</Grid>
I'm creating universal application on windows 10, where I can create simple list.
And I have problem. I would like to create hiding top bar. When user swipe down, bar fade in to screen from top (something like status bar, when swipe it shows all content). Can you give my any tips where I should look for solution or gave me one? I use also GestureRecognizer but it does not work well with Scroll Viewer.
Here is my User Control with bar:
<Grid>
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Fill="DarkOrange" Grid.Row="0" Margin="0"/>
<TextBox Name="TextBox" KeyDown="TextBox_KeyDown" Grid.Row="0" Margin="-2,5,2,13" Style="{StaticResource TextBoxStyle1}" Grid.RowSpan="2"/>
<Polygon Grid.Row="1" Points="0,0, 40,25, 0,50" Fill="DarkOrange" Margin="172.584,-30.584,186.416,-7.25" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" >
<Polygon.RenderTransform>
<CompositeTransform Rotation="90"/>
</Polygon.RenderTransform>
</Polygon>
</Grid>
Here is page where I would like to use this bar:
<Grid Background="Black" Name="LayoutRoot" PointerPressed="OnPointerPressed" PointerReleased="OnPointerReleased" Margin="0,-76,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="49*"/>
<RowDefinition Height="309*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1" Name="scrollViewer" VerticalScrollMode="Enabled" ManipulationMode="All" ManipulationStarted="ScrollViewer_ManipulationStarted" DirectManipulationCompleted="ScrollViewer_DirectManipulationCompleted" DirectManipulationStarted="ScrollViewer_DirectManipulationStarted" IsEnabled="True" >
<StackPanel Name="sc" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollMode="Enabled">
</StackPanel>
</ScrollViewer>
</Grid>
Finally, I stared looking for pull to refresh. And I found this! pull to refresh Sample
Very nice samples :)
I am trying to show a progressring while storing data but I can not get it to show. My Xaml looks as follows:
<Page
x:Class="MyApp.MyPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Model="using:MyApp.Model"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.BottomAppBar>
<CommandBar Height="58">
<AppBarButton Icon="Save" Label="" Click="AddAppBarButton_Click"/>
</CommandBar>
</Page.BottomAppBar>
<Grid x:Name="LayoutRoot">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Title Panel -->
<StackPanel Grid.Row="0" Margin="19,0,0,0">
<TextBlock Text="Name" Style="{ThemeResource BaseTextBlockStyle}" Margin="0,12,0,0"/>
<TextBox x:Name="nameTextBox" Margin="0,10,21.833,0" />
<TextBlock Text="Item" Style="{ThemeResource BaseTextBlockStyle}" Margin="0,12,-4.167,0"/>
<TextBox x:Name="itemTextBox" Margin="0,10,96.833,0" PlaceholderText="" Grid.ColumnSpan="2" />
<AppBarButton Grid.Column="1" HorizontalAlignment="Left" Icon="AddFriend" Label="" Margin="88.167,-2,0,0" VerticalAlignment="Top" Height="66" Click="ItemAppBarButton_Click"/>
<Grid Margin="0,0,-0.167,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
</Grid>
<ListView x:Name="ItemListView" Height="379" Margin="0,10,21.833,0" IsItemClickEnabled="True" ItemClick="ItemListView_ItemClick">
<ListView.DataContext>
<Model:Person/>
</ListView.DataContext>
</ListView>
</StackPanel>
<ProgressRing Name="BusyProgressRing" HorizontalAlignment="Left" Margin="169,299,0,0" VerticalAlignment="Top"/>
</Grid>
</Page>
When I do:
BusyProgressRing.IsActive = true;
It does not show. Because at the end of my member function I do a BusyProgressRing.IsActive = false; and the rendering of the ring only occurs after my whole function is done.
Does anyone know how to solve this?
Yes, because ProgressRing does not appears in design time. It appears just in Runtime. You will see it when you deploy the application.
Additionally, ProgressRing always appears in the center of the screen. You don't have to write code for this.
Tested your code and the ProgressRing works. I did remove the margins and correct issue with row/column position of some UI element in your code and add
IsActive = "True"
to the ProgressRing. Your original code (with the margins) puts ProgressRing outside visible area when tested on my desktop.
I am using the PerformanceProgressBar from Silverlight toolkit on the (pseudo) splashpage. However, it only displays one moving dot. What is wrong?
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="ActiveSplash" Height="Auto" Width="480" Background="Pink" Grid.Row="1" Visibility="Visible">
<Image Name="SplashScreenImage" Source="/SplashScreenImage.jpg"></Image>
<toolkit:PerformanceProgressBar Width="480" Height="Auto"
IsIndeterminate="True"
Foreground="Blue"
Background="Blue"
Margin="0,104,0,0" />
</Grid>
<Grid x:Name="ContentPanel" Visibility="Collapsed" Grid.Row="2">
<!-- stuff -->
</Grid>
</Grid>
Is your app doing a lot of processing while using the performance progress bar?
I've notices that the more you have in the UI thread, less points you see in the bar.
Try doing your processing in a background thread
Does anyone have the xaml to get the look and feel of this UI?
This is one way we can do your UI:
<ListBox x:Name="contentList" SelectionChanged="OnFileHit">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="Marc Boyer" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Text="Inviation check this out here" Grid.Row="1" FontSize="{StaticResource PhoneFontSizeMedium}" Foreground="GreenYellow"/>
<TextBlock Text="When: Thursday 9 PM" Grid.Row="2" FontSize="{StaticResource PhoneFontSizeNormal}" Opacity="0.5"/>
<TextBlock Text="9.45" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="1" FontSize="{StaticResource PhoneFontSizeNormal}"/>
<Image Grid.Row="1" Grid.Column="1" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
u Should use panorama and pivot pages to get this kinda UI. Its not very difficult to design such UI but i currently don't have a similar looking screen. probably this link might help u better.
http://www.silverlightshow.net/items/Windows-Phone-7-Part-5-Panorama-and-Pivot-controls.aspx
and also this
http://windowsphonegeek.com/articles/WP7-Navigation-in-depth--Navigation-controls
I found this cool templates that I think others will find it useful.
http://wp7designtemplates.codeplex.com/
the page and tabs are done using the pivot control, there is a template you can choose when you create a new project that has it in by default and also shows how you can create custom list items