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!)
Related
Each UserControl I have in a stackPanel has a WrapPanel, and each UserControl in this WrapPanel is a word (so they have a different size from each other, depending on the length of the word), so that a sentence appears.
Here is an image to help you understand better:
In pink it is the UserControl "sentence" that contain each of them ONE wrapPanel
In Green it is all the UserControl "word" that have all different size according to the word length.
Here is the UserControl "word":
<UserControl x:Class="Coran_seul.UC.UserControl_WordInVerse"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Coran_seul.UC"
mc:Ignorable="d" Margin="5,0,5,0">
<StackPanel>
<TextBlock x:Name="textBlock_arabic" Text="ٱلْأَنفَالُ " FontSize="20" HorizontalAlignment="Center" FontFamily="Noto Naskh Arabic" MouseEnter="textBlock_arabic_MouseEnter" MouseLeave="textBlock_arabic_MouseLeave" Cursor="Hand" MouseDown="textBlock_arabic_MouseDown"/>
<TextBlock x:Name="textBlock_french" Text="Les surplus (de bénéfice)" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
And here is the UserControl "sentence" (with the wrapPanel I have a problem with)
<UserControl x:Name="userControl" x:Class="Coran_seul.UC.UserControl_VerseInSurah"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Coran_seul.UC"
mc:Ignorable="d" Margin="0,5,0,5"
>
<Border x:Name="Border_Verse" >
<StackPanel Orientation="Horizontal" x:Name="grid">
<Label x:Name="Label_VersetNum" Content="2" Height="{Binding ActualHeight, ElementName=WrapPanel_Mots, Mode=OneWay}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Stretch" HorizontalAlignment="Left" MouseDown="Label_VersetNum_MouseDown"/>
<WrapPanel x:Name="WrapPanel_Mots" Width="{Binding ActualWidth, ElementName=userControl, Mode=OneWay}" />
</StackPanel>
</Border>
The problem :
Now that I've entered the code, here's the problem I'm having with my wrapPanel:
The last word of each line does not wrap, even if it is larger than the space left (= it is therefore hidden/cut off at the edge of the wrapPanel)
Again I have a video to better explain the problem :
https://streamable.com/lpdf38
I don't know what it's due to and I'm desperately looking since yesterday not to have this problem anymore, knowing that the stackPanel containing all the userControls has a right margin of 20 so that it's not hidden behind the scrollbar.
Please help me to find a solution so that the word as long as it is hidden even by one pixel is wrapped to the next line.
Thank you,
The problem is that you bind the WrapPanel's Width to that of its UserControl parent without subtracting the Width of the Label element.
You should not need to bind any Width at all, when you use suitable Panel elements, like e.g. a Grid or a DockPanel instead of StackPanel.
<Border x:Name="Border_Verse">
<DockPanel>
<Label x:Name="Label_VersetNum" DockPanel.Dock="Left" .../>
<WrapPanel x:Name="WrapPanel_Mots">
</DockPanel>
</Border>
<Border x:Name="Border_Verse">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label x:Name="Label_VersetNum" Grid.Column="0" .../>
<WrapPanel x:Name="WrapPanel_Mots" Grid.Column="1">
</DockPanel>
</Border>
You may also consider to use an ItemsControl to display a sentence. It would use a WrapPanel as its ItemsPanel and the word UserControl in its ItemTemplate:
<ItemsControl ItemsSource="{Binding Words}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<uc:UserControl_VerseInSurah/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
where Words is a collection of word data item objects in the view model, i.e. the object in the DataContext of the view. The two TextBlocks in the word UserControl would have their Text property bound to an appropriate property on the word data item class.
You may not even need the word UserControl at all, since you can simply move the elements from its XAML into the DataTemplate that is used as ItemTemplate.
See Data Templating Overview for details.
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"
I'm adding a functionality to my program which views image thumbnails to listview.
What i want is bind the width of border to my image but i can't make it work
here is my code
<Border x:Name="imgbrdr" BorderBrush="Black" BorderThickness="1" Margin="5,5,5,5">
<ListView Name="Thumbnails" SelectionChanged="Thumbnails_SelectionChanged" >
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Source}" Height="{Binding ElementName=imgbrdr}" RenderOptions.BitmapScalingMode="HighQuality"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Border>
You forgot to add the property path of the Border.
<Image Source="{Binding Source}" Height="{Binding ElementName=imgbrdr, Path=ActualHeight}" RenderOptions.BitmapScalingMode="HighQuality"/>
You don't need that Binding at all.
To make the images the same width as the ListView, you only need to disable horizontal scrolling. You can then also set a Margin on the Image controls. With a ListView width of e.g. 200 and a Margin of 10, the images would be 180 wide.
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Source}" Margin="10"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListView>
Note also that you could as well use a ListBox, which is the base class of ListView.
So I have a listbox and I'm trying to use a stackpanel inside as an item with a border. Now I want every item to be the same width as my listbox, which is anchored to the sides of the window. I found how to set the width relative to the parent but for some reason it turns out to be wider. Can't seem to figure out why. Picture below code of how it looks.
<ListBox x:Name="listBoxSecrets" Margin="10,107,10,10" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Orange" CornerRadius="2,2,2,2" BorderThickness="2,2,2,2">
<StackPanel Background="White"
Width="{Binding RelativeSource=
{RelativeSource FindAncestor,
AncestorType={x:Type ListBox}},
Path=ActualWidth}"
>
<TextBlock Text="{Binding Path=Name}" />
<TextBlock Text="{Binding Path=Totp}" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
ListBox.ActualWidth is too much for ListBoxItems. But ListBoxItems will use all available width if ListBox has HorizontalContentAlignment set to "Stretch":
<ListBox HorizontalContentAlignment="Stretch"
I've got following code. Why are my items always clipped after about 70px
<sdk:HierarchicalDataTemplate x:Key="OptionsTemplate">
<CheckBox IsTabStop="False" Content="{Binding EnumValue}" IsChecked="{Binding IsSelected, Mode=TwoWay}" />
</sdk:HierarchicalDataTemplate>
<sdk:HierarchicalDataTemplate x:Key="EnumOptionsTemplate" ItemsSource="{Binding Values}" ItemTemplate="{StaticResource OptionsTemplate}">
<TextBlock Text="{Binding EnumType}"/>
</sdk:HierarchicalDataTemplate>
<sdk:TreeView x:Name="FilterTreeView" ItemsSource="{Binding GeoObjectFilter}" ItemTemplate="{StaticResource EnumOptionsTemplate}">
<sdk:TreeView.Template>
<ControlTemplate TargetType="sdk:TreeView">
<StackPanel Background="Transparent">
<ItemsPresenter x:Name="TreeItems" />
</StackPanel>
</ControlTemplate>
</sdk:TreeView.Template>
</sdk:TreeView>
Thanks in advance!
Ho yes i had same issue when redefining the TreeView Template. By the way, i'm not sure you need to, since StackPanel is the Default Template. I got my (wrappanel) template to work by setting a style for ItemsPanel rather than redifining it. And i had to define some width also. Seems the only way to make the Treeview to scale is to bind the width.
See the answer i made to my question here :
https://stackoverflow.com/a/8802718/856501