We Keep Coding

WPF listview items fires unlimited MouseEnter and MouseLeave events

I have list view with some items in it, an image with title and description.
I have to implement a functionality to show an hover with an image when user mouseenter in the area of image with in the list item.
Ever thing is working fine but have one problem.
Every time when i hover over any image, hovered image causing blinking underneath there will be unlimited calls of mouseenter and mouseleave events.
I did googling and find SCOTT HANSELMAN's blog post but nothing works for me.
<ListView ItemsSource="{Binding Path=CurrentSlideItems}" Name="listSlides" SelectionChanged="listSlides_SelectionChanged" KeyDown="listSlides_KeyDown" Padding="0" SelectionMode="Multiple" PreviewMouseDoubleClick="listSlides_PreviewMouseDoubleClick" Grid.ColumnSpan="2">
<ListView.ItemTemplate>
<DataTemplate>
<Grid MaxWidth="{Binding Path=ActualWidth,ElementName=listSlides}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*"/>
<ColumnDefinition Width="0.6*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderBrush="Black" BorderThickness="1,1,1,1" Margin="0,2">
<Image Source="{Binding Path=Image}" MaxWidth="150" Name="image1" Stretch="Fill" Margin="0" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave">
</Image>
</Border>
<StackPanel Orientation="Vertical" Grid.Column="1">
<TextBlock FontWeight="Bold" Text="{Binding Path=Title}" Margin="5,4,2,2" TextWrapping="Wrap" TextTrimming="WordEllipsis"/>
<TextBlock Text="{Binding Path=Description}" Margin="5,2,2,2" TextWrapping="Wrap" MaxHeight="80" TextTrimming="CharacterEllipsis" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Edit: with events
private void image1_MouseEnter(object sender, MouseEventArgs e)
{
var srcImg = e.Source as System.Windows.Controls.Image;
showPopup(srcImg);
}
private void image1_MouseLeave(object sender, MouseEventArgs e)
{
var pop = (Popup)this.FindResource("popup");
if (!pop.IsMouseCaptured)
{
if (!popupFlag)
{
pop.IsOpen = false;
}
}
}

ScrollViewer.ChangeView() does not scroll horizontally

I'm trying to create two scrollviewers that scroll vertically and horizontally respectively.
The scrolling should start when the manipulationdelta event is detected, and I have used the ChangeView method to move the scrollviewers accordingly. The vertical scrollviewer is ok, but it's not the same for the horizontal one.
I have added an image to show the 2 scrollviewers since i cannot post it right here.
Here's the code: XAML
<!--horizontal scrollviewer-->
<ScrollViewer x:Name="horizontalScrollViewer"
Grid.Column="1"
Grid.RowSpan="3"
HorizontalScrollMode="Disabled"
VerticalScrollMode="Disabled">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="100"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<!--upperGrid-->
<GridView Grid.Row="0"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled"
ItemsSource="{Binding dataItems}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical"
MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Height="80" Width="80" Text="{Binding}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<!--bottomGrid-->
<GridView Grid.Row="2"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled"
ItemsSource="{Binding dataItems}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical"
MaximumRowsOrColumns="1"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Height="80" Width="80" Text="{Binding}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</ScrollViewer>
and the .cs
private void dataGrid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
var x = e.Delta.Translation.X;
var y = e.Delta.Translation.Y;
if(Math.Abs(x)> Math.Abs(y))
{
bool result = horizontalScrollViewer.ChangeView( horizontalScrollViewer.HorizontalOffset - x , null, null);
result = centralScrollViewer.ChangeView(horizontalScrollViewer.HorizontalOffset - x, null, null);
}
else
{
bool result = centralScrollViewer.ChangeView(null, verticalScrollViewer.VerticalOffset -y, null);
verticalScrollViewer.ChangeView(null, verticalScrollViewer.VerticalOffset - y, null);
}
}
In the msdn documentation I have read that :
horizontalOffset
Type: IReference [C++] | System.Nullable [.NET]
A value between 0 and ScrollableWidth that specifies the distance the content >should be scrolled horizontally.
but my ScrollableWidth is equal to zero and I can't understand why.
Does anyone know what's wrong with my code?

I've found a solution by myself!
I had to add the horizontalscrollbar visibility option on the horizontal scrollviewer. It's quite odd since I didn't need to add it to the vertical one. Anyway here's the code of the horizontal scrollviewer:
<ScrollViewer x:Name="horizontalScrollViewer"
Grid.RowSpan="3"
Grid.Column="1"
HorizontalScrollMode="Disabled"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled">

I don't think you can scroll while scrolling is disabled. If you're just trying to hide the scrollbars, then do the following:
<ScrollViewer x:Name="horizontalScrollViewer"
Grid.Column="1"
Grid.RowSpan="3"
HorizontalScrollMode="Enabled"
VerticalScrollMode="Enabled"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden">
...
</ScrollViewer>

WPF Affect all types of an element (Stackpanel) programatically

I want to hide all Stackpanels when a button is clicked programatically, how can I accomplish this?
<Window>
<Grid>
<Button x:Name="btn1" Click="toggle_stackpanels" />
<StackPanel HorizontalAlignment="Left" Height="505" Margin="705,0,0,0" VerticalAlignment="Top" Width="55" Background="#FFD82727"/>
<StackPanel HorizontalAlignment="Left" Height="505" Margin="655,0,0,0" VerticalAlignment="Top" Width="50" Background="#FF6DEA49"/>
<StackPanel HorizontalAlignment="Left" Height="505" Margin="600,0,0,0" VerticalAlignment="Top" Width="55" Background="#FF1F92BD"/>
</Grid>
</Window>
public void toggle_stackpanels(object sender, RoutedEventArgs e)
{
//Hide All Stackpanels
}

Adding content to PivotItem dynamically

I have a page with a Pivot. It´s based on the Visual Studio Template.
<!--Pivot Control-->
<phone:Pivot SelectionChanged="evt_pivot_SelectionChanged">
<phone:Pivot.Title>
<StackPanel HorizontalAlignment="Center">
<!-- <TextBlock Text="MyApp" /> -->
<Image Stretch="None" HorizontalAlignment="Left" Margin="0" MinWidth="50" MaxHeight="50" Source="/mAppData/logo.png"/>
</StackPanel>
</phone:Pivot.Title>
<!--Pivot item one-->
<phone:PivotItem Header="Favoriten">
<!--Double line list with text wrapping-->
<phone:LongListSelector Margin="13,0,0,0" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,25">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.ColumnSpan="2" Text="FELIX ClubRestaurant (Berlin)" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top" Margin="0,0,0,22" />
<Image Grid.Column="0" Width="110" Height="20" Source="/mAppData/stars-3.png" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0"/>
<TextBlock Grid.Column="1" Text="10 min." TextWrapping="NoWrap" Margin="0" Style="{StaticResource PhoneTextSubtleStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>
<Grid VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="100" Height="100" Source="http://img.myserver.net/news-teaser//p189j19861b36c5d1pp012i21grgd.gif"/>
<Image Grid.Column="1" Width="100" Height="100" Source="http://img.myserver.net/news-teaser//p187qrndfcj0la0f12clfkv10ec7.gif"/>
<Image Grid.Column="2" Width="100" Height="100" Source="http://img.myserver.net/news-teaser/005e5d03f058fa8f7bd95f6410dfc6d6.gif"/>
<Image Grid.Column="3" Width="100" Height="100" Source="http://img.myserver.net/news-teaser/3c05cbf76fba7ada5182b4426e55d96b.gif"/>
</Grid>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>
<!--Pivot item two-->
<phone:PivotItem Header="Empfohlen">
</phone:PivotItem>
</phone:Pivot>
I added in CodeBehind the handling for the event SelectionChanged. That works fine. So I can capture by code, when user comes to the second PivotItem.
private async void evt_pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
int mPivotIndex = Convert.ToInt16(((Pivot)sender).SelectedIndex.ToString());
if (mPivotIndex == 1)
{
// HERE I WANT TO INSERT THE SOLUTION
}
}
Now comes my problem: When user navigates to seconds item, I want to:
request some data from an WebService (this in not the problem)
transform the data (this is not the problem) and
populate the data in a LongListSelector (THIS IS MY PROBLEM PART 1)
In case that an error occures, I want not to display the LongListSelector but a TextBox showing a message (THIS IS MY PROBLEM PART 2)
How can I get my 2 problems get working?

You will need to bind the text/content of your controls in the itemtemplate to the data collection fieldname
Text="{Binding Fieldname}"
http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207023(v=vs.105).aspx
In your error handling, set the visibility of the Longlistselector to Collapsed. Then you can show another control which displays the textbox
<StackPanel>
<LongListSelector x:Name=”MyListSelector”>
..stuff
</LongListSelector>
<TextBlock x:Name=”MyError” Visibility=”Collapsed”> </TextBlock>
</StackPanel>
Catch (Exception Ex)
{
MyListSelector.Visibility = Visibility.Collapsed
MyError.Visibility = Visibility.Visible
MyError.Text = Ex.Message;
}

you can hide the Longlist selector and add the Textbox with the Error message directly from the code behind. see the code below.
try
{
//make the service call and do your stuff
}
catch(exception ex)
{
MyListSelector.Visibility = Visibility.Collapsed;
var errorTextBox = new TextBox();
errorTextBox.Text = "some Error has occured";
//add all the properties you want to add for textbox such as color,height,fontsiz ect..
//Name your pivotitem control, say pivotitem1
pivotitem1.Content = errorTextBox;
}
hope this helps.
Note: uncompiled code. pardon compilation errors

ManipulationCompleted event is not firing on Button

In my Windows Phone 8.1 Universal Application, I have a ListView with a button in the ItemTemplate, and I need to see when that button's ManipulationStarted and ManipulationCompleted events are fired. Currently ManipulationStarted works fine, but ManipulationCompleted does not. Could someone help explain why?
SnapsPage.xaml
<Grid Grid.Row="0" Background="#88686868">
<Grid.RowDefinitions>
<RowDefinition Height="130" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Vertical" Margin="20,0,0,0">
<TextBlock Text="{Binding Path=Manager.Account.Username, FallbackValue='loading...'}" Margin="0,12,0,0" Style="{ThemeResource HeaderTextBlockStyle}"/>
<TextBlock x:Uid="Snaps" Text="SNAPS" Style="{ThemeResource TitleTextBlockStyle}" Typography.Capitals="SmallCaps"/>
</StackPanel>
<ScrollViewer x:Name="ScrollViewer" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"
Padding="0,0,0,20" Grid.Row="1" HorizontalContentAlignment="Stretch">
<ListView HorizontalContentAlignment="Stretch"
ItemsSource="{Binding Path=Manager.Account.Snaps}">
<ListView.ItemTemplate>
<DataTemplate>
<Button x:Name="ButtonSnap" Style="{StaticResource BasicEmptyButtonStyle}"
ManipulationStarting="ButtonSnap_OnManipulationStarting"
ManipulationCompleted="ButtonSnap_OnManipulationCompleted"
ManipulationMode="All"
Command="{Binding ElementName=ItemsControl, Path=DataContext.TryDownloadMediaCommand}"
CommandParameter="{Binding}">
<!-- Content Here -->
</Button>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel HorizontalAlignment="Stretch"></VirtualizingStackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</ScrollViewer>
</Grid>
<Grid Grid.Row="0" x:Name="MediaGrid" Background="#FF000000" IsHitTestVisible="False">
<Image x:Name="MediaImage" IsHitTestVisible="False"/>
<Grid Width="45" Height="45" Background="#99000000"
VerticalAlignment="Top" HorizontalAlignment="Right" Margin="25">
<TextBlock Text="10" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Segoe WP Semibold" FontSize="24" />
</Grid>
</Grid>
SnapsPage.cs
private void ButtonSnap_OnManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e)
{
Debug.WriteLine("ButtonSnap_OnManipulationStarting");
var button = sender as Button;
if (button == null) return;
var snap = button.DataContext as Snap;
if (snap == null) return;
_relevantSnap = snap;
_isFingerDown = true;
_scrollYIndex = ScrollViewer.VerticalOffset;
_holdingTimer.Start();
}
private void ButtonSnap_OnManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
Debug.WriteLine("ButtonSnap_OnManipulationCompleted");
_isFingerDown = false;
if (_isMediaOpen)
DisposeMediaTidily();
}

Note: I tested with Windows Phone 8.1 XAML App (not Silverlight)
The Button has a ManipulationMode of System which, according to the docs, means that you should not get manipulation events.
An element must have a ManipulationMode value other than None or System to be a manipulation event source