Im trying to achive this on a windows phone 8 project:
I want to have a number of rows filled with elements (images in this case) that i can scroll in the horizontal, having the ability to click on them and navigate to a new page, besides that, i want that list to be scrollable on the vertical
For example, i would scroll down til i saw Row 10, then on Row 10 i wouls scroll to the right until i get to the image 8, and when i pressed it i would navigate to another page.
if anyone could give me a clue on how to make this happen i would appreciate
Maybe this will help you. Put a Scrollviewer inside a ListBox Datatemplate with Horizontal scrollBarVisibility.
<ListBox Grid.Row="1" Name="listBoxClient">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer VerticalAlignment="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" Width ="400">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding YourImageSource}" Width="YourWidth" Height="YourHeight" Tap="Iamge_Tap"/>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In code behind
private void Iamge_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
NavigationService.Navigate(new Uri("Your page path",UriKind.Relative));
}
Related
So, I've got this mediaelement, which I want to appear in the middle of the screen, 20 pixels away from each edge, and when it's width gets to 600, it stops expanding and stays where it is. I've got the following XAML to get exactly what I want:
<Grid x:Name="video">
<MediaElement x:Name="player" AreTransportControlsEnabled="True" Margin="20,0" MaxWidth="600" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
The only problem is that the VerticalAlignment property seems to always be set to "Stretch". How can I fix this? I've tried using a viewbox, which works flawlessly, except I then get overly large or small TransportControls. I've also tried putting the mediaelement inside another grid with centered alignments, but I still get the same problem.
What you want is
20 pixels away from each edge.
But in your code you defined Margin="20,0", if you read the FrameworkElement.Margin property, you will find the useage <frameworkElement Margin="left+right,top+bottom"/>. With your code, this usage makes your MediaElement stretch in the vertical orientation.
If you use the Live Visual Tree to get a real-time view of your running XAML code, you will find, when you use the code Margin="20,0", the MediaElement is like this:
And if you use the code Margin="20", the MediaElement is like this:
The dashed red border in each picture stands for the MediaElement control.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Pivot Margin="0,0,0,0" Background="LightGray">
<PivotItem Header="Formulas">
<Grid>
<GridView HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Background="#FF983636">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<x:String>One</x:String>
<x:String>Two</x:String>
<x:String>Three</x:String>
<x:String>Four</x:String>
</GridView>
</Grid>
</PivotItem>
</Pivot>
</Grid>
The key here is HorizontalAlignment="Stretch" on the GridView.
The HorizontalAlignment="Center" on the VariableSizedWrapGrid inside the ItemsPanelTemplate inside the Gridview; should do the trick which will always keep the content centered regardless of the width of the screen.
In the end, I found how to fix this, by keeping a constant aspect ratio of 16/9:
XAML:
<Grid SizeChanged="player_SizeChanged" Background="Black" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="1" MinHeight="1" Margin="30" MaxWidth="1000" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<MediaElement x:Name="player" Margin="0">
</Grid>
C#:
private void player_SizeChanged(object sender, SizeChangedEventArgs e)
{
(sender as Grid).Height = (e.NewSize.Width * 0.5625);
}
I'm trying to do news app for windows store with c# and xaml..
In this project, I created a Panorama GridView like windows phone 8.. And inside of this Panorama GridView, I created small gridviews for cathegories..
Structure is like this in Document Online;
-<Grid> (whole page)
-<Grid> (Header/Logo etc.)
-<PanoramaGridView> (All cath will be under of this)
-<HotNewsGridView>
-<HotNewsGrid>
-<GroupHeaderTextBlock>
-<HotGridView>
-<SportNewsGridView>
-<PoliticsGridView>
-<GalleryGridView>
And first side of code..
<GridView x:Name="PanoramaGridView"
Grid.Row="1"
Style="{StaticResource GridViewStyle1}"
ItemContainerStyle="{StaticResource GridViewItemStyle2}">
<GridViewItem Margin="0,0,2,0" VerticalAlignment="Top">
<Grid Margin="30,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition/>
</Grid.RowDefinitions>
<GridView x:Name="HotNewsGrid"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource MansetItemTemplate}"
Grid.Row="1"
SelectionChanged="HotNewsGrid_SelectionChanged"/>
<TextBlock x:Name="GroupHeaderTextBlock"
HorizontalAlignment="Left"
Margin="0,0,-7,-18"
Grid.RowSpan="1"
TextWrapping="Wrap"
Text="Hot News"
Foreground="DarkGreen"
VerticalAlignment="Top"
Style="{StaticResource SubheaderTextStyle}"/>
</Grid>
The problem is, I cannot scroll when my mouse cursor come on the "HotNewsGrid" grid. I can only scroll from top and bottom of the application..
I think, my PanoramaGridView is okay with scrolling but when my cursor comes subgridviews (like hot news gridview) it stops scrolling, cannot scroll from it. I tried to put IsSwipeEnable, ScrollViewer.HorizontalScrollMode="Enabled" etc.. Did not worked..
I do not want scrolling the "HotNewsGrid". I just want to continue scrolling when my cursor comes on it..
I hope you understand me.. This is a very big problem for me..
Waiting your helps..
Thank you..
Add this Template to your GridView
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
and you will be able to scroll using a mouse.
Note that a side effect of this is that you can no longer swipe select on your GridView
I am a ListBox with images from IsolatedStorage, in which the user may select an image to use. I would like to somehow show the user which image they have currently selected, or pressed, within the Listbox via a border around the image (or another way if better). I am not sure exactly how to get the currently selected image and place a border around that image. I am currently using the SelectionChanged event of the ListBox to attempt this functionality. What I have so far is as follows:
MainPage.xaml
<ListBox x:Name="Recent" ItemsSource="{Binding Pictures}" Margin="8"
SelectionChanged="recent_SelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
MainPage.xaml.cs
private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
//Place border round currently selected image
//?
}
Any thoughts?
Update to Fix
MainPage.xaml
//within the ListBox DataTemplate
<Border>
<Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
</Border>
MainPage.xaml.cs
//within recent_SelectionChanged
var lb = sender as ListBox;
var lbi = lb.ItemContainerGenerator.ContainerFromItem(lb.SelectedItem) as ListBoxItem;
lbi.BorderThickness = new Thickness(2, 2, 2, 2);
lbi.BorderBrush = new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"]);
I'd create another image on top of the image in your data template. This image would be mostly transparent with just the border and maybe a little tick (like Windows 8 apps have). Then I would toggle the visibility of this image when the item is selected.
Because the image would be mostly transparent it would show as a border around the selected image.
I use this technique to 'grey out' items (by using a solid black image with ~10% opacity) and it works really well.
You should be able to simply bind the visibility to the selected property - though you'd need a converter to convert between boolean and visibility.
<DataTemplate>
<Image x:Name="recentImage" Source="{Binding Source}" Margin="12" Width="115"/>
<Image x:Name="borderImage" Source="Images/borderimg.png" Margin="12" Width="115" Visibility="Collapsed"/>
</DataTemplate>
Then:
private void recent_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
//set the visibility property of the selected item to 'Visible'
}
I have ItemControl
It displays one panel for each record inside ObservableCollection.
My Problem is….
When size of ObservableCollection increase window can’t accommodate more panels so it displays only first six panels.
So criteria, One panel for each record inside ObservableCollection,couldn't be accomplish.
So, I need to have scroll bar so I can access each panel.
How does it can be implement?
See one screen shot below and Code of It Here
Thanks......
You need to host your panel within a ScrollViewer. This allows it to grow beyond the space available to it, whilst the ScrollViewer adds a Scrollbar.
You can do this by modiyfing the ItemsControl template:
<ItemsControl>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer>
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
Put any controls you want to have scrollbars into the ScrollViewer. Example taken from MSDN:
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
<TextBlock TextWrapping="Wrap" Margin="0,0,0,20">Scrolling is enabled when it is necessary.
Resize the window, making it larger and smaller.</TextBlock>
<Rectangle Fill="Red" Width="500" Height="500"></Rectangle>
</StackPanel>
</ScrollViewer>
I am displaying images inside the listbox. i have placed this listbox inside the scrollviewer. I am using two repeat button to move the listbox items. I am binding the listbox using datacontext.
Problem:
If i move the images using the button and click on the image in the lisbox it moves to the initial position.
Code:
<RepeatButton Click="rbtnLeft_Click" Name="rbtnLeft" Width="30" Height="30">
<Image Source="Images/GeneralImages/search_right_arrow.jpg"></Image>
</RepeatButton>
<Grid x:Name="grid" Width="666" HorizontalAlignment="Left">
<ScrollViewer Grid.Row="1" Name="svGame"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden" >
<ListBox ClipToBounds="True" Name="lbGameImage" Width="Auto" SelectionChanged="lbGameImage_SelectionChanged" ItemsSource="{Binding}" ItemsPanel="{DynamicResource iptListBox}" ItemContainerStyle="{DynamicResource ListBoxItemStyle}"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"/>
</ScrollViewer>
</Grid>
<RepeatButton Click="rbtnRight_Click" Name="rbtnRight" Width="30" Height="30">
<Image Source="Images/GeneralImages/search_left_arrow.jpg"></Image>
</RepeatButton>
c# Code:
private void rbtnLeft_Click(object sender, RoutedEventArgs e)
{
svGame.ScrollToHorizontalOffset(svGame.HorizontalOffset + 5);
}
private void rbtnRight_Click(object sender, RoutedEventArgs e)
{
svGame.ScrollToHorizontalOffset(svGame.HorizontalOffset - 5);
}
The problem is that the ListBox thinks it owns the ScrollViewer, so whenever the selection changes it sets the offset back to what it wants. Set ScrollViewer.CanContentScroll="False" in the ListBox to prevent this.
You need to turn off the internal ScrollViewer inside the ListBox. You could do it by re-templating lbGameImage to remove the ScrollViewer completely but the quicker way (which it looks like you tried to do) is to set both of the ScrollBarVisibility settings on lbGameImage to "Disabled". Hidden means that they're still active and scrolling the content, you just can't see them.