We Keep Coding

TextBlock with a slider when text is too long in WPF

As in title. I want to create TextBlock with both horizontal and vertical sliders, that will automatically adjust depending on text size. Google just shows me Slider control which is definitely not what i'm looking for.
Any clues what can i use to achieve it?
Edit
Thanks to some of the helpful people here i have this:
<ScrollViewer Grid.Column="1" Style="{StaticResource MaterialDesignScrollViewer}">
<TextBlock ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" Text="{Binding Path=(SQLLog:LogDisplay.LogAdvanced)}" FontSize="12"/>
</ScrollViewer>
Vertical scroll bar appears, horizontal not. Even when text doesn't fit inside the TextBlock.

You can use a ScrollViewer and its HorizontalScrollBarVisiblity and VerticalScrollBarVisibility properties. Just surround your TextBox with it:
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
Height="100"
Width="200">
<TextBlock Text="{Binding MyFancyTextProperty}"
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=Width}"
TextWrapping="Wrap"/>
</ScrollViewer>
Consider adding TextWrapping="Wrap" to your TextBlock, so that its content doesn't end up being displayed in one line.
If you want to display the scrollbars at any time, even if the content fits, set their values to Visible:
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="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

Centering a mediaelement according to the aspect ratio

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

Problems with flyout over itemscontrol in Windows Phone 8.1

I've got the following piece of XAML code:
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding History}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Tapped="HistoryItemTapped">
<FlyoutBase.AttachedFlyout>
<Flyout>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}" />
</ScrollViewer>
<ScrollViewer>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}" />
</ScrollViewer>
</StackPanel>
</Flyout>
</FlyoutBase.AttachedFlyout>
<TextBlock Foreground="{ThemeResource PhoneMidBrush}" FontSize="{ThemeResource TextStyleExtraLargeFontSize}" HorizontalAlignment="Left" Text="{Binding Expression}"
TextTrimming="CharacterEllipsis"/>
<TextBlock FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}" HorizontalAlignment="Right" Text="{Binding Result}"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
There are two problems I can't solve:
The flyout is shown upon tapping on one of items:
private void HistoryItemTapped(object sender, TappedRoutedEventArgs e)
{
FlyoutBase.GetAttachedFlyout((FrameworkElement)sender).ShowAt((FrameworkElement)sender);
}
However, no matter how I set up the flyout it always shows on the top of the screen, not over the tapped item. Why?
The flyout contains two TextBlocks on separate ScrollViewers. The text on one of them exceeds width of the flyout, bt the scrollviewer does not appear to be working (I cannot scroll horizontally the textblock). Why is that?

So let's knock these out real quick. Your #1 would be expected result, it's just going off the default FlyoutPlacementMode enumeration wherein generally your flyout is just meant to appear over the top in one of 5 spots, Top, Bottom, Left, Right, or Full(Center)
How to fix it, ditch the flyout control and just animate your own panel to do the same thing on a tap event or whatever, not hard at all.
Your #2, if I remember right the default on ScrollViewerfor something like the HorizontalScrollBarVisibility is False by default. So just add HorizontalScrollBarVisibility="Auto" to it.
Hope this helps, cheers

Scrollviewer Problem wpf

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.