Is there is any way to get grid view item after double click. I have not found double click event in metro gird view. Only events like ItemClick and PointerPressed are there. Any suggestion?
<GridView Name="downloadGrid"
HorizontalAlignment="Left"
ItemsSource="{Binding Source={StaticResource CollectionItems}}"
Grid.Column="0" Grid.Row="2" PointerPressed="downloadGrid_PointerPressed"
ItemContainerStyle="{StaticResource CustomGridViewItemStyle}"
Width="Auto" SelectionChanged="downloadGrid_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Margin="6" Height="280" Width="200">
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="35"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Image Source="{Binding Path=Thumbnail}" HorizontalAlignment="Left" Grid.Row="0" Stretch="Fill"/>
<Image Grid.Row="0" Source="{Binding Path=Type, Converter={StaticResource Icon}}" MaxWidth="20" MinWidth="20" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding Path=Caption}" TextWrapping="Wrap" Foreground="#FF017DD5" Grid.Row="1" HorizontalAlignment="Left" FontSize="11" Margin="3,0,0,0" Height="Auto"/>
<ProgressBar Grid.Row="2" Value="{Binding Path=PercentOfCompletion, Converter={StaticResource ProgressConverter}}" Width="75" Height="11" HorizontalAlignment="Left" VerticalAlignment="Center" FontFamily="Segoe UI" BorderThickness="1" Foreground="#FF78D200" Margin="3,0,0,0">
<ProgressBar.BorderBrush>
<SolidColorBrush Color="#FF78D200"/>
</ProgressBar.BorderBrush>
</ProgressBar>
<!--<TextBlock Grid.Row="2" Text="{Binding Path=PercentOfCompletion, Converter={StaticResource ProgressConverter}}" Margin="-15,0,15,0" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Segoe UI" Foreground="#333333" FontSize="12"/>-->
<TextBlock Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Center" Text="{Binding Path=StatusInfo}" Style="{StaticResource MainPageTextStyle}" Margin="0,0,5,0"/>
<Button x:Name="playNow" Grid.Row="3" Content="Play Now" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource DownloadButtonStyle}" Click="playNow_Click" Margin="3,0,0,0" IsEnabled="{Binding IsPlay}"/>
<Button x:Name="pauseResumeBUtton" Grid.Row="3" Content="Pause" HorizontalAlignment="Right" VerticalAlignment="Center" Style="{StaticResource DownloadButtonStyle}" Click="pauseResumeBUtton_Click" Margin="0,4,3,2" IsEnabled="{Binding IsResume}"/>
<TextBlock Grid.Row="4" HorizontalAlignment="Left" VerticalAlignment="Center" Text="Size: " Style="{StaticResource MainPageTextStyle}" Margin="5,0,0,0"/>
<TextBlock Grid.Row="4" HorizontalAlignment="Right" VerticalAlignment="Center" Text="{Binding Path=OriginalFileSize, Converter={StaticResource FileSizeConverter}}" Style="{StaticResource MainPageTextStyle}" Margin="0,9,5,6"/>
<!--<TextBlock Grid.Row="5" HorizontalAlignment="Left" VerticalAlignment="Top" Text="Output: " Style="{StaticResource MainPageTextStyle}" Margin="5,0,0,0"/>
<TextBlock Grid.Row="5" HorizontalAlignment="Right" VerticalAlignment="Top" Text="iPhone / iPod" Foreground="#FF017DD5" FontSize="12" Margin="0,2,5,0"/>-->
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
The problem with using a Tapped (or DoubleTapped) event is that these events only fire when it detects a Tap gesture. "Well, yeah. That's exactly what I want", you may say.
Buuuuuut if you are using a mouse and you click on your item and the mouse moves a little bit (or a lot) before you release your finger, then that event is not recognized as a Tap. So that event will not fire. This can lead to the user not understanding why his clicks are not being recognized. This can be reproduced easily and consistently.
Potential Hacky Solution
The only way I can currently think of implementing what you would to do is by using the ItemClick event. When a GridViewItem is clicked, start a timer. The next time the ItemClick event fires, check if the same item was clicked within a reasonable amount of time (500ms? Less? I'm sure this is a quick Google away).
Of course you have to make sure you take care of stopping the timer and all that stuff.
As VasileMarianFălămaș wrote in the comments to your question you can use the double tapped event.
however you should question yourself if you want double tap events on a grid item. One of the best Windows 8 features is that app apps function the same way. Users shouldn't have to think if they should double tap or just tap in this application.
What action do you want to do when double tapping? opening the item? this is normally done by single tap.
here is an overview of when which gestures are used in Windows 8 apps:
http://msdn.microsoft.com/en-us/library/windows/apps/hh761498.aspx
Related
I am developing a WPF app from 2 locations, one has a beefy PC on windows 10, the other has a much older PC with worse hardware, running Windows 7.
on the windows 10 PC, I never notice a problem, this is only reproducible on windows 7 machine.
In my Window, I have a ContentControl which is bound to a UserControl property in the window's viewmodel.
I can show different usercontrols there, and most behave fine. I have 2 however, which when I attempt to load them, they take literally 3-5 seconds, during which the UI thread hangs.
They don't have much going on in xaml, I have more complex stuff in xaml in other controls so I don't think the problem lies there.
The one thing these 2 controls are doing differently, which other controls which don't have this issue aren't doing is in the constructor for the usercontrol in the .xaml.cs file, they set their datacontext.
InitializeComponent();
DataContext = new CreateGroupPanelViewModel();
The contructor for the viewmodel, just sets some properties to values. Mainly some string to string.Empty, instantiates 2 ObservableCollections, sets a bool to true and sets a string to "Create Game".
The first time I open this control, I have the problem but the second time it poses no delay at all. Also, if I run the program for a minute or so and THEN try to open it for the first time it will also be fine.
I cannot understand why instantiating this usercontrol would create such a massive performance hit, or why it would act so differently on the 2 different machines.
EDIT
The slowdown occurs within the InitializeComponent(); of the usercontrol.
Here is the XAML of such a control:
<UserControl x:Class="CasinoDB.UserControls.ModifyPanels.UCModifyGamePanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:CasinoDB.UserControls.ModifyPanels"
xmlns:vm="clr-namespace:CasinoDB.ViewModels"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Header}" HorizontalAlignment="Center" Margin="5" FontWeight="Bold" FontSize="20" />
<StackPanel Grid.Row="1" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Name:" Margin="5" />
<TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="150" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="RTP:" Margin="5" />
<TextBox Text="{Binding RTP, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="50" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Variance:" Margin="5" />
<TextBox Text="{Binding Variance, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="150" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Lines:" Margin="5" />
<TextBox Text="{Binding Lines, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="100" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Min Bet:" Margin="5" />
<TextBox Text="{Binding MinBet, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="50" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Max Win:" Margin="5" />
<TextBox Text="{Binding MaxWin, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="75" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Vendor:" Margin="5" />
<TextBox Text="{Binding Vendor, UpdateSourceTrigger=PropertyChanged}" Margin="5" MinWidth="150" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<TextBlock Text="Notes:" Margin="5" />
<TextBox Text="{Binding Notes}" Margin="5" Width="250" TextWrapping="Wrap" AcceptsReturn="True" AcceptsTab="True" SpellCheck.IsEnabled="True" Height="75" VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" />
</StackPanel>
<CheckBox Content="Create Another" IsChecked="{Binding CreateAnother}" Margin="5" Visibility="{Binding ShowCreateAnother, Converter={StaticResource BooleanToVisibilityConverter}}" HorizontalAlignment="Center" HorizontalContentAlignment="Center" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<Button Content="SAVE" Command="{Binding Save}" Margin="5" Style="{StaticResource ConfirmButton}" />
<Button Content="CLOSE" Command="{Binding Close}" Margin="5" />
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
OK, so after attempting to isolate the issue, I finally found my problem. It lies in SpellCheck.IsEnabled="True" on TextBoxes. I found this by commenting out large sections, testing performance, then uncommenting small amounts until it was acting slow on the machine it acts slow on.
After figuring this was the cause, I found a similar post on SO with information relating to a registry entry being filled up with dictionairies. I don't appear to have an entry in that location in the registry, so maybe my problem was similar, but that it was looking and couldn't find anything at all.
Anyway, I can live without spellcheck in those fields, I'll just remove it.
How can I create a multicolumn ListView/ListBox in WPF with good performance. I know how to do it with WrapPanel. In the ListBox I have about 70-150 items and scrolling is laggy/not so fluent (like with VirtualStackPanel). Do you know how to solve this problem?
Thank you
Here is ListBox XAML
<ListBox x:Name="ListBoxSubtitles" VirtualizingStackPanel.IsVirtualizing="True" Margin="0,0,0,0" ItemsSource="{Binding Subtitle,Mode=TwoWay}" Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="{x:Null}" Background="#FFEEECEC"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="520" Height="150" Background="#FF424242" Margin="5,5,5,0">
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding PosterImgUri,Mode=TwoWay}" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="UniformToFill">
<Image.Effect>
<BlurEffect Radius="40" />
</Image.Effect>
</Image>
<Image Width="75" Height="110" Grid.Column="0" Margin="2,2,2,2" VerticalAlignment="Top" HorizontalAlignment="Stretch" Source="{Binding PosterImgUri,Mode=TwoWay}" Stretch="Fill"/>
<Label Grid.Column="0" Content="86%" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Bottom" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Semibold" FontSize="18" FontWeight="Bold"/>
<StackPanel Grid.Column="1">
<Label HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Semibold" FontSize="25" FontWeight="Bold">
<TextBlock TextWrapping="Wrap" Text="{Binding SubtitleName,Mode=TwoWay}">
</TextBlock>
</Label>
<Grid>
<Label Content="Stažení:" HorizontalAlignment="Left" Margin="0,-7,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Light" FontSize="18"/>
<Label Content="{Binding subtitleName,Mode=TwoWay}" HorizontalAlignment="Left" Margin="65,-7,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Light" FontSize="18"/>
</Grid>
<Grid Width="100" Height="20" Margin="0,0,0,0" HorizontalAlignment="Left">
<ProgressBar Value="50" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="7,0,0,0" Foreground="#FF84E60F" Background="White"/>
<Label Margin="0,-2,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Content="50" FontSize="10" FontWeight="Bold"></Label>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
also I would like to ask, how to remove this blue selection when mouse is focusing item.
You need a virtualizing wrap panel. Unfortunately, writing such kind of panel is not easy and most good implementations are either not free or not working for arbitrary complex data templates.
You can make the image bindings async, using the IsAsync property.
Another approach is to reduce the visual tree, which is not an option, because you go after quality. You can move the layout from the DataTemplate into a dedicated UserControl and load the images only when the control is visible (VisibilityChanged event or rectangle intersect based).
I am sorry for my bad English.
I want to make a program for windows 8.1 universal. I have a question about design UI. I have a menu in top of my app for choose one option to see full information at the bottom of page. I want to make page that work for all different page size and resolutions. When person change the size of app windows, the top menu must changed like here. (for example when person decrease size of page):
Please save image because It's gif with animation.
I try to use viewbox but viewbox make the button in top menu smaller so button's boarder is changed. (or maybe I don't know how to do it)
It's my code But It doesn't work like my example:
<Viewbox>
<StackPanel Orientation="Horizontal">
<StackPanel x:Name="StackConnectionInfor" Orientation="Horizontal" Margin="10,0,30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandInformation.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Information</TextBlock>
</StackPanel>
<StackPanel x:Name="StackConnectionReport" Orientation="Horizontal" Margin="30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandReport.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Reports</TextBlock>
</StackPanel>
<StackPanel x:Name="StackConnectionChart" Orientation="Horizontal" Margin="30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandChart.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Chart</TextBlock>
</StackPanel>
</StackPanel>
</Viewbox>
Is it possible to help me?
Thanks.
You can use Grid as a container and define 4 columns:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
I'm a newbie in Win8 development, and I'm stuck in implementing some design that I assume to be fairly easy, since I do have some experience of C#, Javascript, etc.
I created a DataTemplate like this：
<DataTemplate x:Key="Customized250x250ItemTemplate">
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border>
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding State}" VerticalAlignment="Top" Margin="0,10,20,0" FontFamily="Segoe UI" FontSize="12"/>
<Grid x:Name="InfoGrid" Background="Black" Opacity="0">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Nickname" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="1"/>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Nickname}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="2"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Age" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="3"/>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Age}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="4"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Race" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="5"/>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Race}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="6"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Language" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="7"/>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Language}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="8"/>
</Grid>
</Grid>
</DataTemplate>
That Grid with the name "InfoGrid" is designed to be an overlay container of detail information of the current hover GridViewItem, the overlay will fade in nicely when certain GridViewItem is hovered. So I set its Opacity to 0, looking for some approaches to accomplish my design.(I've used this design in websites so many times, but first time in Win8 app)
That's when I feel really trapped, it seems impossible.
I tend to override the template(ItemTemplate & ItemContainerStyle)
It doesn't work out. ItemTemplate is all about Data, ItemContainerStyle is all about sty
le, but they are independent of each other, when PointerOver state is on, it can't do anything to content in ItemTemplate but simply change some useless properties of outer container.
It confuses me why GridView in Win8 Metro doesn't provide Hover event for single GridViewItem, is there anything that I need to know to finish this? Some hints, please.
While ItemContainerStyle might include some visual states that could help you - it might be easier to simply put a UserControl in your ItemTemplate/DataTemplate. Once you create a UserControl - you have easy access to its code-behind and you can handle various events, define visual state and transition between these states whenever you want. Your problem might be though that there is no hover event you could handle with touch input, so you should think about some alternatives - perhaps show your overlay on tap, in the details view when you tap on the item or in a separate panel for selected grid view item. Note that a grid with 10 rows or 8 TextBlocks on top of a 250x250 tile won't be readable to most users.
i design page bellow code.
<ScrollViewer VerticalScrollBarVisibility="Visible" Grid.Row="1" x:Name="svProduct">
<StackPanel>
<ItemsControl x:Name="lstSearchResult" ItemsSource="{Binding Path=PIProductList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Width="480" Style="{Binding CellStyle}" Orientation="Horizontal" VerticalAlignment="Center" Height="50" >
<TextBlock Foreground="Black" FontSize="20" Width="320" FontFamily="Tahoma" Margin="10,0,0,0" Text="{Binding Title}" VerticalAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="btnBookmark" Click="btnBookmark_Click" Tag="{Binding}" Background="Transparent">
<Button.Content>
<Image Source="/Images/bookmarks_red.png" Width="33" Height="30" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
<Button BorderThickness="0" x:Name="btnSubmit" Click="btnSubmit_Click" Background="Transparent" Tag="{Binding}" >
<Button.Content>
<Image Name="ram" Source="/Images/blue_arrow.png" Width="40" Height="40" VerticalAlignment="Top" Margin="-15"></Image>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
i want to access for btnBookmark visuble false .
can't access btnBookmark.Visibility=Visibility.collapsed
how to do this?
please help to me...........
The best way I know to do this is to create a Visiblity property on your item ViewModel (the one that is bound to each row in your ItemsControl) and toggle that value based on the changes to each item, presumably via the toggle button in each row. I don't know of a good way to "loop and look" for these internal controls. You're much better off using the existing data binding infrastructure to manage this for you.