We Keep Coding

ScrollBar isn't visible although its properties are right

I have a ScrollBar and a ScrollViewer.
I want to scroll the contents of the ScrollViewer using my own ScrollBar.
My problem is that the ScrollBar disappears after a few milliseconds.
This is my code:
<StackPanel HorizontalAlignment="Stretch">
<ScrollBar
x:Name="TestScrollBar"
HorizontalAlignment="Stretch"
Orientation="Horizontal"
Scroll="TestScrollBar_Scroll"
Maximum="{Binding ElementName=TestScrollViewer, Path=ExtentWidth, Mode=OneWay}"
ViewportSize="{Binding ElementName=TestScrollViewer, Path=ViewportWidth, Mode=OneWay}"
Visibility="Visible"
Background="Aqua"/> <!--This is set for seeing when/if the ScrollBar is visible-->
<ScrollViewer
x:Name="TestScrollViewer"
ViewChanged="TestScrollViewer_ViewChanged"
HorizontalAlignment="Stretch"
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Auto"> <!--This is set to Auto for now, but should be Disabled/Hidden later-->
<TextBlock FontSize="144" Text="This is blind text. Ignore this completely. It is only here to fill up the ScrollViewer horizontally."/>
</ScrollViewer>
</StackPanel>
private void TestScrollBar_Scroll(object sender, ScrollEventArgs e)
{
TestScrollViewer.ChangeView(e.NewValue, null, null);
}
private void TestScrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
TestScrollBar.Value = TestScrollViewer.HorizontalOffset;
}
When I run my app, the Bar is visible for a few milliseconds (a aqua-colored flash) and disappears after.
I checked all the values that are set in XAML and my code using the Live Visual Tree and Live Property Explorer and everything seems to be fine, but the ScrollBar isn't visible, even when the one of the ScrollViewer is.
How can I fix this?
Even ChatGPT said I should ask on StackOverflow.

You just need to set IndicatorMode to MouseIndicator. The IndicatorMode is None by default.
So, your ScrollBar code should be like this:
<ScrollBar
x:Name="TestScrollBar"
HorizontalAlignment="Stretch"
Background="Aqua"
IndicatorMode="MouseIndicator"
Maximum="{Binding ElementName=TestScrollViewer, Path=ExtentWidth, Mode=OneWay}"
Orientation="Horizontal"
Scroll="TestScrollBar_Scroll"
ViewportSize="{Binding ElementName=TestScrollViewer, Path=ViewportWidth, Mode=OneWay}"
Visibility="Visible" />

WPF show MouseMove position

I have XAML:
<Grid MouseMove="onMouseMove" >
<ItemsControl Name="btnTableImageList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Content}"
Height="{Binding Height}"
Width="{Binding Width}"
Tag="{Binding Tag}"
Margin="{Binding Margin}"
Background="{Binding Background}"
HorizontalAlignment="Center"
MouseDown="tblButton_MouseDown"
MouseUp="tblButton_MouseUp"
Click="ClickHandlerTableBtn"
TextBlock.TextAlignment="Center" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
And code behind:
private void onMouseMove(object sender, MouseEventArgs e)
{
lblCoord.Content = Mouse.GetPosition(Application.Current.MainWindow);
}
On the form there is Label named lblCoord, and there are two buttons that are created after form is loaded.
I want to display mouse coordinate in lblCoord in relation to the Grid, but coords are displayed only when i move mouse cursor over any of the buttons that are placed inside that grid.
My guess is that I am placing MouseMove="onMouseMove" in wrong place.
Thanks for your help.

It will work when you set Background of Grid to anything but Transparent
As default, Grid's background is transparent. When it is transparent, mouse events work when you set Background="Transparent" too.
Mouse events handled nearest parent element with background IMHO

WP 8.1 WinRT - Custom tooltip (or UserControl) in maps for a pushpin?

I'm working with the MapControl from the new api for the Windows Phone 8.1 WinRT. What I'm trying to achieve is to display a simple tooltip right above the tapped pushpin (with additional information about the pushpin location). Preferably I'd like that tooltip to be a UserControl.
Sadly there's no built-in support from api, neither simple solution for that in web. So far people used to use a ContextMenu feature found in WindowsPhoneToolkit library, unfortunatelly it's Silverlight-only. Flyout is also not an option. ToolTipService also doesn't work properly.
What I've done so far is to hook up into a pushpin's Tapped event, and then, in code-behind, add a child to the pushpin's Grid - but it it doesn't look like a good option, and it makes my pushpin move.
Code XAML:
<maps:MapControl x:Name="Map">
<maps:MapItemsControl ItemsSource="{Binding Pushpins}">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="MyGrid"
Tapped="UIElement_OnTapped">
<Grid.RowDefinitions>
<RowDefinition Height="*" /> // if grid is tapped I will insert a UserControl to that row
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="1"
Width="24"
Height="24"
Source="{Binding Converter={StaticResource PushpinLogoConverter}}"
maps:MapControl.Location="{Binding Location}"
maps:MapControl.NormalizedAnchorPoint="1,0.5" />
</Grid>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:MapControl>
Code behind:
private void UIElement_OnTapped(object sender, TappedRoutedEventArgs e)
{
var grid = (Grid)e.OriginalSource;
var tooltipBase = new TooltipBase();
grid.Children.Add(tooltipBase);
tooltipBase.SetValue(Grid.RowProperty, 0);
}
Can you tell me if there's a better way to do it? How to make MyGrid not to move when I add a children to it? Thanks in advance for any help, I really appreciate it!

Just create a UserControl with a PushPin Icon and a Grid above it with a simple TextBox inside.
Make the Grid invisible by default, and make it Visible once the user click on the pushpin to show all the data that you want.
<Grid>
<Ellipse Fill="#FFF4F4F5"
HorizontalAlignment="Center"
Height="50"
Stroke="Black"
VerticalAlignment="Center"
Width="50"
Tapped="Ellipse_Tapped"/>
<Grid x:Name="locationInfoGrid"
Margin="0,-100,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Width="100"
Height="100"
Background="#FFB4B4B4">
<TextBlock x:Name="locationInfo"
FontSize="14"/>
</Grid>
</Grid>
Code Behind:
private void Ellipse_Tapped(object sender, TappedRoutedEventArgs e)
{
locationInfo.Text = "Location info here";
if (locationInfoGrid.Visibility == Visibility.Visible)
locationInfoGrid.Visibility = Visibility.Collapsed;
else
locationInfoGrid.Visibility = Visibility.Visible;
}
Then simply add the UsercControl to your Map at the specific location.
private async void Button_Click(object sender, RoutedEventArgs e)
{
MyUserControl1 uc = new MyUserControl1();
MyMap.Children.Insert(0, uc);
MapControl.SetLocation(uc, location);
MapControl.SetNormalizedAnchorPoint(uc, new Point(0.5, 1));
}

List of horizontal ScrollViewer - WP8

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));
}

Display Border around Selected Item in ListBox

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'
}