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"
Related
I have placed a textbox inside a scrollviewer control. The textbox is updated with content from my database, however when the box becomes full, the box resizes to fit more text. I would like the scrollviewers scroll feature to activate at this point, and allow the user to scroll to see more text. I have tried the following:
<ScrollViewer>
<TextBox FontSize="14" TextWrapping="Wrap" ScrollViewer.CanContentScroll="True"/>
</ScrollViewer>
<ScrollViewer>
<TextBox FontSize="14" TextWrapping="Wrap" ScrollViewer.CanContentScroll="True" VerticalScrollBarVisibility="Visible" AcceptsReturn="True"/>
</ScrollViewer>
Any help would be much appreciated, Thanks.
You can use the ScroollViewer attached properties directly on a TextBox. Specify also the maximum height of the TextBox - MaxHeight:
<TextBox ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
FontSize="14" TextWrapping="Wrap" MaxHeight="300" />
No need to insert the TextBox inside the ScrollViewer.
you can implement scrolling functionality on a content control like
The text box in the follow TreeViewItem, constructed by a data template, is not horizontal adjustable to the edges of the tree view.
<DataTemplate x:Key="PageTemplate" x:DataType="local:OnenoteEntity">
<TreeViewItem AutomationProperties.Name="{x:Bind Page.Title}" HorizontalContentAlignment="Stretch">
<StackPanel
MaxWidth="{Binding ActualWidth, ElementName=UiOnenoteTreeView}"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Orientation="Horizontal">
<Image
Height="{Binding ActualHeight, ElementName=UiNameOnenoteEntity, Mode=OneWay}"
Margin="0,0,10,0"
VerticalAlignment="Center"
Source="Resources/Page.png" />
<TextBlock
x:Name="UiNameOnenoteEntity"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{ThemeResource BodyTextBlockStyle}"
Text="{x:Bind Page.Title}"
TextWrapping="WrapWholeWords" />
</StackPanel>
</TreeViewItem>
</DataTemplate>
The text in the box dont wrapp at the edge of the container in the tree view. The text box has the width size of the actual text, according to the following picture:
Picture
What can i do, to wrap the text? Thanks for answering
As #2zemec said, you need to change the TextWrapping property of TetxBlock to Wrap. In addition, since you set the Orientation of StackPanel as Horizontal, the StackPanel will give the full width to each child control, and then put them out horizontally. It will not limit the width of TextBlock, so the TextBlock won't wrap. In this case, you can also set a MaxWidth for TextBlock to limit it or use Grid to replace the StackPanel. For example:
<Grid MaxWidth="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Height="{Binding ActualHeight, ElementName=UiNameOnenoteEntity, Mode=OneWay}"
Margin="0,0,10,0"
VerticalAlignment="Center"
Source="Assets/StoreLogo.png" />
<TextBlock Grid.Column="1"
x:Name="UiNameOnenoteEntity"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{x:Bind Title}"
TextWrapping="Wrap"/>
</Grid>
Try to change TextWrapping="WrapWholeWords" to TextWrapping="Wrap". According to MSDN
Wrap - Line-breaking occurs if the line overflows beyond the available block width, even if the standard line breaking algorithm cannot determine any line break opportunity, as in the case of a very long word constrained in a fixed-width container with no scrolling allowed.
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!)
When I try and push the source code from a site such as google into a textbox, the code is truncated after what appears to be a max length or height. I'm not quite sure which one it is yet.
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<CheckBox Margin="0,0,30,0" Content="Live Edit" IsChecked="{Binding isLiveEdit, Mode=TwoWay}"/>
<Button Width="130" Content="Run" Click="Run_Click"/>
<Button Content="Save Mods" IsEnabled="{Binding siteSaved}"/>
</StackPanel>
<ListBox Height="455" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<TextBox Text="{Binding source, Mode=TwoWay}" TextWrapping="Wrap" Width="600"/>
</ListBox>
</StackPanel>
It appears to not matter if I use TextBox or TextBlock. It hits this invisible limitation. The height of the control is still correct. For example I can keep scrolling but there is no text.
Here is a screenshot of where the textbox appears to end however the listbox that it is in will still allow me to continue to scroll as if it is populated with invisible data.
I'm a newbie to c#. I have designed a windows program with button and listbox. The listbox populates the log as the script runs the application. However, as the listbox gets populated with log, the button and label increases which makes the stack panel very ugly?
Any help/advice would be appreciated. Below is my xaml code.
<Grid>
<Border BorderBrush="Black" BorderThickness="2" Margin="0,11,0,5" CornerRadius="5" Background="White">
<StackPanel Orientation="Horizontal" Margin="7,10,7,2">
<StackPanel Orientation="Vertical">
<TextBlock Text="City" Margin="5" HorizontalAlignment="Center"></TextBlock>
<ComboBox Name="City" SelectedValue="Chicago" SelectedValuePath="Name">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name,Mode=OneWay}"></TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
<Button Name="btnEnter" Content="Enter" Width="200" Margin="4" Padding="6" Click="btnEnter_Click"></Button>
<Button Name="btnViewLog" Content="View Log" Width="100" Margin="4" Padding="6" Click="btnLog_Click"></Button>
<ListBox Name="lbLog" Visibility="Collapsed">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Description}" IsReadOnly="True" BorderThickness="0" Background="Transparent"></TextBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
Thanks.
Ash
Without your Xaml, it is hard to diagnose the problem, so please try to post it with any further questions. It SOUNDS like it is a horizontal StackPanel, and the elements are all next to each other.
If the orientation of your StackPanel is Vertical, set the HorizontalAlignment on the button to Left, Right, or Center. If the StackPanel orientation is Horizontal, set the VerticalAlignment on the button to Top, Bottom, or Center.
I'm pretty certain both settings are "Stretch" by default, which means they will try to fill all the space that is available, rather than sizing to their content.