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"

How do I keep a specific xaml element within the window (so it doesn't overflow through the bottom)

I'm trying to make a simple invoicing application as part of an assessment. I have made a interface with a listbox that contains all the items that have been requested. However when I add too many items, the listbox then flows through the bottom of the window and I have to resize the window to fit.
I've tried a dockpanel, and I've assigned the stackpanel to the grid itself. If I set a fixed height it seems to work as expected.
Here is the xaml of the listbox:
<StackPanel Grid.Column="1" Grid.Row="0" ClipToBounds="True">
<ListBox Name="Shirts" HorizontalContentAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Visible" Margin="5" ClipToBounds="True">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock>
<Run Text="{Binding ShirtSize}" />
<Run Text="{Binding ShirtStyle}" />
<Run Text="{Binding ShirtColour}" />
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Content="Print Invoice" Margin="5" ClipToBounds="True"/>
</StackPanel>
I expected the code to work like this (it's not meant to be of fix height but it works as an example).
How it actually works.

Use a DockPanel instead of a StackPanel and it should work better. StackPanel will grow with its content regardless of its container size. A DockPanel will respect the container size and fill the available space. Put the button first in order with Dock="Bottom" and then the ListBox with Dock="Fill" (the list will arrange itself above the button even though it is declared after it, which is a bit unintuitive)

WPF Dockpanel extending beyond width of parent

I am attempting to create a dock panel inside of a list view data template that takes up all of the available width of its parent tab control. I started by basing my XAML off of this question and thus came up with this:
<TabControl x:Name="tabControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TabItem Header="Clipboard Buffer">
<ListView Name="clipboardListView" ScrollViewer.CanContentScroll="True">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" BorderBrush="Black" CornerRadius="2,2,2,2">
<DockPanel Background="AliceBlue" Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">
<TextBlock Text="{Binding Text}" DockPanel.Dock="Top" />
</DockPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</TabItem>
...
This almost works, however the dock panel always seems to be just a little bit wider than the space available in the tab control as you can see here.
I can use the scroll bar to move over and see the end of my dockpanel as one would expect...
However, if I attempt to re-size the form, the dockpanel remains slightly larger than the amount of space available in the tab control.
What am I missing here? How can I make my dock panel stay within the width of its parent tab control?

Try this:
<TabControl x:Name="tabControl" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TabItem Header="Clipboard Buffer">
<ListView Name="clipboardListView" ScrollViewer.CanContentScroll="True" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="2" BorderBrush="Black" CornerRadius="2,2,2,2" >
<DockPanel Background="AliceBlue" >
<TextBlock Text="asdfasdkfhkasdfkasdgfkjhdgfkuwegyfkwegfbkuweyfuksyadukfykweugbyfu" DockPanel.Dock="Top" />
</DockPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</TabItem>
</TabControl>
Note the HorizontalContentAlignment="Stretch" in the ListView

Your DockPanel is nested into a Border element:
<Border BorderThickness="2" BorderBrush="Black" CornerRadius="2,2,2,2">
<DockPanel Background="AliceBlue" Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}">
The Border occupies some width of its own - it has a border thickness of 2, so it is 4 pixels wider than its content.
The content of the Border is your DockPanel - and you have bound its width to the actual width of the enclosing TabControl. As a result, the aforementioned Border will always be a bit wider than the enclosing TabControl.
For a start, you could try and bind the width of the Border rather than that of the DockPanel. This should help to some extent, although I am not completely sure the TabControl doesn't require some extra inner space for its page contents.

It's most likely caused by this line in your DockPanel XAML:
Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}
Your setting the Width to the ActualWidth of the TabControl, without taking into account any Padding or Margin on the Children.
You need to check if the TabControl, TabItem or ListView have any padding or margins, then take this off too. (Don't forget the 2pixel border!)

Binding text with viewbox produces unwanted behaviour

The appeareance of my button is perfect if I define what the text is.
Working Image
<StackPanel Orientation="Horizontal">
<ContentControl ContentTemplate="{StaticResource Icons.Person}" Style="{StaticResource Icon}"/>
<TextBlock Text="PERSONS"/>
</StackPanel>
I want to set the text to be Binding to a variable but this Overlaps the image.
Appearance after Bindings
<StackPanel Orientation="Horizontal">
<ContentControl ContentTemplate="{StaticResource Icons.Person}" Style="{StaticResource Icon}"/>
<TextBlock Text="{Binding Persons"/>
</StackPanel>
Icon.xaml
<DataTemplate x:Key="Icons.Person">
<Viewbox>
<Path ......./>
</Viewbox>
</DataTemplate>
Path code is huge, if it's needed I'll upload it.
What I've tried is changing the Datatemplate to be only a ViewBox with a key, and change content control to be a stackpanel with a viewbox within it and the text box. Same effect would happen. May I ask how to fix this or what's an alternative to show my datatemplate/viewbox with a binding text field

Click TextBlock to open Expander object WPF

I'm not so good at XAML, and I'm trying to make something like this:
(source: deviantart.net)
I want a few options (The orange ones) and then when I click the orange ones, they expand and show further options.
Here's the little code I have:
<ListView Background="#585858" Width="300" HorizontalAlignment="Left">
<ListViewItem>
<Grid Margin="15,5">
<TextBlock Foreground="#FFABADB3" Text="MenuTitle" FontSize="20" Grid.Row="0"/>
<Expander Grid.Row="1">
</Expander>
</Grid>
</ListViewItem>
</ListView>
But it doesn't really work as I want it to. The Textblock and the Expander goes on the same line.
Here's what my code looks like:
http://i.imgur.com/dbtNPUv.png
If anyone can guide me in the right direction I'd be really glad!
Thanks in advance and happy holidays :)

Put the TextBlock in the Expander Header
<ListView Background="#585858" Width="300" HorizontalAlignment="Left">
<ListViewItem>
<Grid Margin="15,5">
<Expander Grid.Row="1">
<Expander.Header>
<TextBlock Foreground="#FFABADB3" Text="MenuTitle" FontSize="20" Grid.Row="0"/>
</Expander.Header>
</Expander>
</Grid>
</ListViewItem>
</ListView>
But if you want the design from the picture,you will have a lot more work to do. You will need to "retemplate" the ListViewItem and the Expander. Default templates are far from the one on the picture.