The code below is working nice but the vertical ScrollBar is disabled even if large text inside of TextBlock. How can I enable it?
<UserControl.DataContext>
<viewModels:CommentsViewModel/>
</UserControl.DataContext>
<Grid>
<DockPanel >
<TreeView DockPanel.Dock="Top"/>
<Expander Header="Yo" DockPanel.Dock="Bottom" VerticalAlignment="Bottom">
<ScrollViewer HorizontalScrollBarVisibility="Disabled">
<TextBlock TextWrapping="Wrap" MaxHeight="250"
Text="{Binding Article.Article.Content}"/>
</ScrollViewer>
</Expander>
</DockPanel>
</Grid>
I found.
MaxHeight="250"
tag should be not in the TextBlock, but should be in the Grid to limit height. Then it will be working perfectly.
<UserControl.DataContext>
<viewModels:CommentsViewModel/>
</UserControl.DataContext>
<Grid>
<DockPanel >
<TreeView DockPanel.Dock="Top"/>
<Expander Header="Yo" DockPanel.Dock="Bottom" VerticalAlignment="Bottom">
<Grid MaxHeight="250">
<ScrollViewer HorizontalScrollBarVisibility="Disabled">
<TextBlock TextWrapping="Wrap"
Text="{Binding Article.Article.Content}"/>
</ScrollViewer>
</Grid>
</Expander>
</DockPanel>
</Grid>
If your just displaying text, to be certain it'll work use a TextBox:
<Expander Header="Yo" DockPanel.Dock="Bottom" VerticalAlignment="Bottom">
<Grid IsReadOnly="True">
<TextBox TextWrapping="Wrap" MaxHeight="250"
Text="{Binding Article.Article.Content}"/>
</Grid>
</Expander>
Related
I would like to make the "Cartoon" below to be aligned to the right and the yellow part to fill all the space in the middle of my ListBox item.
However, all I can get is this:
Here is my layout xaml:
<Window x:Class="Cartoons.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="Cartoons" Height="350" Width="525" SizeToContent="Width">
<DockPanel x:Name="mainPanel">
<Border Background="Green" DockPanel.Dock="Bottom" Width="Auto" Height="Auto">
<Grid Margin="2" Height="Auto">
<ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel HorizontalAlignment="Stretch" Background="PowderBlue">
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" DockPanel.Dock="Left" >
<Image Source="<IMAGE_LOCATION>" Width="64" Height="64" Stretch="Fill"/>
</DockPanel>
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue" DockPanel.Dock="Right">
<TextBlock Text="Cartoon" VerticalAlignment="Center"/>
</DockPanel>
<DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow">
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<TextBlock Text="Character 1"/>
<TextBlock Text="Walt Disney"/>
<TextBlock Text="Speedy Gonzales"/>
</StackPanel>
</DockPanel>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Border>
</DockPanel>
</Window>
I have tried many things but regardless what I do, it is alwasy displayed with large white space to the right.
Much appreciated,
If you're not avoiding hard-coding numbers in, such as margins, you could try this (tested in Visual Studio for your convenience):
<Border Background="Green" DockPanel.Dock="Bottom" Width="Auto" Height="Auto">
<Grid Margin="2" Height="Auto">
<ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">
<ListBoxItem>
<!-- Width of the below element may have to be adjusted -->
<Grid HorizontalAlignment="Stretch" Width="499">
<Image Source="<IMAGE_LOCATION>" Width="64" Height="64" Stretch="Fill" HorizontalAlignment="Left"/>
<!-- Margin of the below element may have to be adjusted -->
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Stretch" Background="Yellow" Margin="69,8,0,8">
<TextBlock Text="Character 1"/>
<TextBlock Text="Walt Disney"/>
<TextBlock Text="Speedy Gonzales"/>
</StackPanel>
<Label Background="AliceBlue" Content="Cartoon" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Right"/>
</Grid>
</ListBoxItem>
</ListBox>
</Grid>
</Border>
Also, there is an extra near the bottom of your XAML, above .
The problem is that the ListBox will generate container elements (of type ListBoxItem) for each item - these will, by default, align content to the left. To change that, add this to your ListBox:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
I figured it out.
Needed to set HorizontalContentAlignment="Stretch" on ListBox.
That resolved the issue. Just modify above line
<ListBox Name="listBoxCartoons" SelectionChanged="ListBox_SelectionChanged">
to
<ListBox Name="listBoxCartoons" HorizontalContentAlignment="Stretch" SelectionChanged="ListBox_SelectionChanged">
and it worked.
Is there possibility to display two TextBlock on a Grid ?
I tried, but i see only my first TextBlock.
Here is my XAML code :
<ListBox x:Name="ListBoxTiers" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="#FFDEDEDE" CornerRadius="10" Margin="10">
<StackPanel Orientation="Horizontal">
<Grid Height="89" Width="975">
<TextBlock x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="{Binding m_strCode}" Margin="12,23,479,30" />
<TextBlock x:Name="TxtBox_NomTiers" Margin="501,23,14,24" TextWrapping="Wrap" Text="{Binding m_strNom}"/>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks a lot :)
Grid is the best UI container which supports orientation. You can modify your code in the below way.
<ListBox x:Name="ListBoxTiers" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="#FFDEDEDE" CornerRadius="10" Margin="10">
<Grid Height="89" Width="975">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="TxtBox_CodeTiers" Grid.Column=0 TextWrapping="Wrap" Text="{Binding m_strCode}" />
<TextBlock x:Name="TxtBox_NomTiers" Grid.Column=1 TextWrapping="Wrap" Text="{Binding m_strNom}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You should have to adjust the column column width as per your requirement.
Both of your texts are drawn at the same location.
You can either add Grid columns/Raws or remove the grid completly and stay with the stackPanel
You should go over Panels Overview
I created user control with the textblock. But it will not wrap. This user control servers as a listboxitem.
<Grid x:Name="MainGrid" Height="Auto" Width="Auto">
<StackPanel Orientation="Horizontal">
<Image Height="50" Width="100" Stretch="Uniform" Name="image1" Source="{Binding Path=VideoImageUrl}" Margin="12,12,13,84" MouseLeftButtonDown="image1_MouseLeftButtonDown" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" />
<StackPanel Orientation="Vertical" >
<TextBlock TextWrapping="Wrap" Height="Auto" HorizontalAlignment="Left" Name="titleTextBox"
Text="{Binding Path=Title, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" FontSize="14" FontWeight="SemiBold" />
<StackPanel Orientation="Vertical" x:Name="StackPanelDetails">
<TextBlock Height="Auto" HorizontalAlignment="Left" Name="desciptionTextBox"
TextWrapping="Wrap"
Text="{Binding Path=Desciption, Mode=OneWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" />
<Line />
<ItemsControl x:Name="CustomItemsSource" ItemsSource="{Binding Path=LinksList}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink NavigateUri="{Binding Path=TopicUrl}" RequestNavigate="Hyperlink_RequestNavigate" >
<TextBlock Text="{Binding Path=TopicName}" />
</Hyperlink>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
A ListBox's default template does not automatically limit the width of its items, but instead uses a ScrollViewer, which shows a horizontal scrollbar when an item is wider than the ListBox.
You can remove the ScrollViewer by replacing the ListBox's Template:
<ListBox ...>
<ListBox.Template>
<ControlTemplate>
<StackPanel IsItemsHost="True"/>
</ControlTemplate>
</ListBox.Template>
...
</ListBox>
Another important thing to note is that a StackPanel in the top-level Grid won't properly resize the contained elements. In the following simplified example the text in the TextBlock is not wrapped because the containing StackPanel simply does not resize it as you expect:
<Grid>
<StackPanel Orientation="Horizontal">
<Image ... />
<Text TextWrapping="Wrap" Text=... />
</StackPanel>
</Grid>
This way it works as you expect:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image ... />
<TextBlock Grid.Column="1" TextWrapping="Wrap" Text=... />
</Grid>
To keep things simple all i am trying to do is to place a listbox and a button below it. Although it seems simple it isn't. It is not, because it is in a GRID...
The row size is star size and listbox having verticalAlign top works great all the time. The problem is that I cannot add a button below it. Having a grid with 2 rows one star height and the other auto would place the button at the bottom of the form even if listbox contents are little. Trying to set both rows auto doesn't work when resizing as no scrollbar is visible at the listbox.... Any workaround for this??
Update some code
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DockPanel >
<ListBox DockPanel.Dock="Top" Name="lbStaff" ItemsSource="{Binding}"
Grid.Row="0" VerticalAlignment="Top" BorderThickness="0"
Background="WhiteSmoke" Margin="15,10,20,30" Style="{DynamicResource
ListBoxUsers}" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource
ListBoxTest1}"></Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Margin="5,4,5,4">
<TextBlock HorizontalAlignment="Stretch" FontSize="16"><Run
Text="{Binding Name}"/> - <Run Text="{Binding Mode=OneWay,
Path=PositionString}"/></TextBlock>
<TextBlock >Τηλέφωνο <Run Text="{Binding Phone}"/>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button DockPanel.Dock="Top" Grid.Row="0" HorizontalAlignment="Right"
VerticalAlignment="Top" Margin="0,10,7,0" Style="{DynamicResource
ButtonStyleNew1}">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="/WpfApplication1;component/Images/filenew1.png"
Stretch="None" VerticalAlignment="Center"></Image>
<TextBlock Margin="5,0,0,0" FontSize="16">Προσθήκη Χρήστη</TextBlock>
</StackPanel>
</Button.Content>
</Button>
</DockPanel>
</Grid>
</Grid>
What i usually do is not using rows of grid but using DockPanel you can adjust the alignments by nesting each elements. But again it totally depends on the designer how they design that using grid row or any other way. What i got from the question the following code should help you out.
but if you post some code then we can figure out where the actual problem is.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DockPanel>
<DockPanel DockPanel.Dock="Top">
<ListBox Height="50"/>
</DockPanel>
<DockPanel DockPanel.Dock="Bottom">
<Button Height="20" DockPanel.Dock="Top"/>
<Label/>
</DockPanel>
</DockPanel>
</Grid>
So your problem here is that you have the in the ListBox you have ScrollViewer.VerticalScrollbars=Visible that make it collapsed if you dont want scrollbars and i would suggest not to use margins more in the designing. if you still have scroll bars remove the height of the ListBox and make the window larger. It all depends upon the size of the window if you don't have the size and proper alignment. Refining your code
<Window xmlns:my="clr-
namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
x:Class="MyLightWpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
xmlns:local="clr-namespace:MyLightWpfApplication.ViewModel"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<DockPanel >
<DockPanel DockPanel.Dock="Top" Width="400" Height="200">
<ScrollViewer DockPanel.Dock="Top" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<ListBox Name="lbStaff" ItemsSource="{Binding AutoCompleteData}"
BorderThickness="0"
Background="WhiteSmoke" >
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel >
<TextBlock HorizontalAlignment="Stretch" FontSize="16"><Run
Text="{Binding FirstName}"/> - <Run Text="{Binding Mode=OneWay,
Path=PositionString}"/></TextBlock>
<TextBlock >Τηλέφωνο <Run Text="{Binding LastName}"/>
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</DockPanel>
<DockPanel DockPanel.Dock="Bottom">
<Button DockPanel.Dock="Top" Height="30" Grid.Row="0">
<Button.Content>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="16">Προσθήκη Χρήστη</TextBlock>
</StackPanel>
</Button.Content>
</Button>
<Label/>
</DockPanel>
</DockPanel>
</Grid>
</Window>
Its all dependent on how much data you have in the ListBox. I have tried this code populating listbox with 20 rows its not showing scrollbars at all
You might try auto for both and put a MaxHeight on the ListBox but you still take a chance of pushing the button off the screen. Or put both in a ScrollViewer. Or can you live with the button on top?
I solved this problem using a dockpanel. I docked buttons at bottom and then i let listbox to fill the remaining area..(lastchildfill=true) ...
It works fine...
Hello all I have a usercontrol that I have defined as a data template. What I trying to do is have the results returned in a wrap panel and have each result returned in a tile format. I have this all working and the resutls are returned properly. However I have within the data template items that I would like the user to click upon. (scrollviewer to scroll data, buttons to click and text to select)/ Currently when you click on the selected item the item is selected but it is as if everything inside the listbox item is locked ( not selectable).
I'd appreciate any suggestions as to what I am missing here. Listed below is my code for the user controls and how I reference the wrap panel from app.xaml
SearchResultTileControl.xaml
<UserControl x:Class="UI.Search.Controls.SearchResultTileControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dts="clr-namespace:UI.Search.Commands"
xmlns:formatter="clr-namespace:UI.Search.Commands"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:qr="clr-namespace:UI.Search.Controls.tiles"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<Grid x:Name="LayoutRoot" >
<ListBox x:Name="ResultListBox"
HorizontalAlignment="Stretch"
Background="{x:Null}"
BorderThickness="0"
HorizontalContentAlignment="Stretch"
ItemsPanel="{StaticResource ResultsItemsControlPanelTemplate}"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}"
ItemsSource="{Binding SearchResults[0].Results}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<formatter:TypeTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch">
<!-- Person Template -->
<formatter:TypeTemplateSelector.PersonTemplate>
<DataTemplate>
<qr:ucTilePerson />
</DataTemplate>
</formatter:TypeTemplateSelector.PersonTemplate>
<!-- Incident Template -->
<formatter:TypeTemplateSelector.IncidentTemplate>
<DataTemplate>
<qr:ucTileIncident />
</DataTemplate>
</formatter:TypeTemplateSelector.IncidentTemplate>
</formatter:TypeTemplateSelector>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Within the Usercontrol ucTilePerson.xaml I have the template setup as:
<UserControl x:Class="UI.Search.Controls.tiles.ucTilePerson"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:formatter="clr-namespace:UI.Search.Commands"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
Width="300"
Height="250"
d:DesignHeight="250"
d:DesignWidth="300"
IsHitTestVisible="False"
mc:Ignorable="d">
<UserControl.Resources>
<formatter:TileHighlightConverter x:Key="FormatConverter" />
</UserControl.Resources>
<Grid x:Name="PersonLayoutRoot">
<Rectangle Style="{StaticResource TileBackground}" />
<ScrollViewer Margin="5" BorderBrush="{x:Null}">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel Margin="0,0,0,2" Orientation="Horizontal">
<StackPanel>
<Image Width="48"
Height="48"
Source="/Images/search/person.png" />
<TextBlock Style="{StaticResource TileRelevance}" Text="{Binding Relevance}" />
</StackPanel>
<StackPanel>
<HyperlinkButton Content="{Binding Type}" Style="{StaticResource TypeHyperlinkButton}" />
<TextBox Margin="0,0,0,2"
Style="{StaticResource TileTextBox}"
Text="{Binding Content[AgencyName]}"
TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
<toolkit:WrapPanel Margin="0,0,0,2">
<TextBlock Style="{StaticResource TileLabel}" Text="Name" />
<TextBox Margin="0,0,3,0"
Style="{StaticResource TileTextBox}"
Text="{Binding Content[lastname]}" />
<TextBox Margin="0,0,3,0"
Style="{StaticResource TileTextBox}"
Text="{Binding Content[firstname]}" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[middlename]}" />
</toolkit:WrapPanel>
<Border Style="{StaticResource TileBorder}">
<toolkit:WrapPanel Orientation="Horizontal">
<StackPanel Style="{StaticResource TileVerticalStackPanel}">
<TextBlock Style="{StaticResource TileLabel}" Text="Race" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[race]}" />
</StackPanel>
<StackPanel Style="{StaticResource TileVerticalStackPanel}">
<TextBlock Style="{StaticResource TileLabel}" Text="Sex" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[sex]}" />
</StackPanel>
<StackPanel Style="{StaticResource TileVerticalStackPanel}">
<TextBlock Style="{StaticResource TileLabel}" Text="DOB" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[dob]}" />
</StackPanel>
</toolkit:WrapPanel>
</Border>
<Border Style="{StaticResource TileBorder}">
<toolkit:WrapPanel Orientation="Horizontal">
<StackPanel Style="{StaticResource TileVerticalStackPanel}">
<TextBlock Style="{StaticResource TileLabel}" Text="Involvement" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[involvementtype]}" />
</StackPanel>
<StackPanel Style="{StaticResource TileVerticalStackPanel}">
<TextBlock Style="{StaticResource TileLabel}" Text="Associated Event" />
<TextBox Style="{StaticResource TileTextBox}" Text="{Binding Content[0].EventAssociation}" />
<HyperlinkButton Content="{Binding Content[0].EventID}" Style="{StaticResource TileResultLink}" />
</StackPanel>
</toolkit:WrapPanel>
</Border>
<Border Style="{StaticResource TileBorder}">
<ContentControl Width="256"
Margin="0,0,6,0"
BorderThickness="0"
Content="{Binding HitContext,
Converter={StaticResource FormatConverter}}"
FontSize="11" />
</Border>
</StackPanel>
</ScrollViewer>
</Grid>
And then I set reference to the wrap panel used in the listboxt ItemsPanel in my app.xaml
<ItemsPanelTemplate x:Key="ResultsItemsControlPanelTemplate">
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
I suspect this is something in the Listbox styles that may be preventing this but I am not positive.
Thanks again for any suggestions,
Cheers
Discovered the issue. Within the usercontrol (ucTilePerson) I had IsHitTestVisible set to false. Since it was set at the user control level all elements inherited this property which is why I was getting the effect of not being able to raise any mouse events on anything.
No idea why I set that there other than it was late in the day.
Cheers