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 :)
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 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.
Is it possible to give an entire grid in xaml both a background image and a color? I am not scaling the image so there are regions that do not have a color. Is it possible to color the rest of the grid in a color?
This is my current code:
<Grid>
<Grid.Background>
<ImageBrush Stretch="None" ImageSource="Images/background_top.png" AlignmentY="Top" AlignmentX="Center"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
</Grid>
In WPF you can even do this if you want to define a brush with both a png and color with VisualBrush (this brush - and quite a few other brushes are not available in Windows Store Apps due to performance hit when rendering the brushes)
Here is a basic example , the brush has quite a few properties you can play around with:
<Window.Resources>
<VisualBrush x:Key="myBrush">
<VisualBrush.Visual>
<Grid>
<Rectangle Fill="Red"/>
<Image Source="troll.png"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Window.Resources>
<Grid Background="{StaticResource myBrush}"/>
The only way that I can think of is to use the Background Property to set the Color, then add an Image to the Grid making sure to span all of your Rows and Columns. As long as the Image is the first Item in your grid the others will be layered on top. I beleive it will give you the effect you are looking for.
<Grid Background="Red">
<Image Grid.RowSpan="2" Stretch="None" Source="Images/background_top.png" VerticalAlignment="Top" HorizontalAlignment="Center"/>
<Label Content="Label" Grid.Row="0" Height="28" HorizontalAlignment="Center" Margin="10,10,0,0" Name="label1" VerticalAlignment="Top" />
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
</Grid>
You could try using a border with your desired colour set as background color, around the grid.
<Border Background="Red">
<Grid>
<Grid.Background>
<ImageBrush Stretch="None" ImageSource="Images/background_top.png" AlignmentY="Top" AlignmentX="Center"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
</Grid>
</Border>
You mean something like this:
<Grid Background="Red">
<Grid.Background>
<ImageBrush Stretch="None" ImageSource="Images/background_top.png" AlignmentY="Top" AlignmentX="Center"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
</Grid>
Not exactly the answer to your question, but to obtain a similar visual effect, you could set the background of your grid to an image ; and the background of your Page/Window to a color.
Put a grid within another grid. The outer grid has a SolidColorBrush, and the inner grid has a partially transparent ImageBrush.
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