Listbox last element incorrect rendering - wpf

I got trouble with the listbox. Please, check the screenshot down there. The last element is kind of "eaten" by the listbox external border (I defined appropriate MaxHeight). Can someone help me?
<DataTemplate x:Key="QCTemplate">
<Grid>
<Expander x:Name="expander" Header="{Binding}">
<Expander.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBox Name="ComponentNameTextBlock" Style="{StaticResource BorderlessTextBoxStyle}" Text="{Binding ComponentName, Mode=TwoWay}" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="1">Количество цитат:</TextBlock>
<TextBlock Name="ComponentVolumeTextBlock" Grid.Column="1" Margin="1" Text="{Binding Volume}" />
</Grid>
</StackPanel>
</DataTemplate>
</Expander.HeaderTemplate>
<!-- Контекстное меню экспандера -->
<Expander.ContextMenu>
<ContextMenu>
<MenuItem Header="Оригинал 'My Clippings.txt'">
<MenuItem Header="Удалить из оригинала..."
Command="{StaticResource ResourceKey=DeleteFromMyClippingsCommand}"
CommandParameter="{Binding}" />
</MenuItem>
</ContextMenu>
</Expander.ContextMenu>
<!-- Внутреннее содержание экспандера -->
<Grid Name="ExpanderContentContainer"
Height="{Binding ElementName=ComponentChildsListBox, Path=ActualHeight}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0"
Width="2" Height="{Binding Path=ActualHeight}"
Fill="Black"
Margin="2"
/>
<StackPanel Orientation="Vertical"
Grid.Column="1" Grid.Row="0">
<TextBox Name="ComponentCommentTextBox"
Text="{Binding Comment, Converter={StaticResource ResourceKey=QCCCommentConvrtr}, Mode=TwoWay}"
BorderThickness="0"
GotFocus="ComponentCommentTextBox_GotFocus"
Margin="1"
/>
<ListBox Name="ComponentChildsListBox"
BorderBrush="Transparent"
ItemsSource="{Binding ChildsCollection}"
ScrollViewer.CanContentScroll="False"
MaxHeight="300"
Margin="1"
Style="{StaticResource LibraryViewListBoxStyle}"
/>
</StackPanel>
</Grid>
</Expander>
</Grid>
</DataTemplate>
Screenshot

Related

XAML DataTemplate with parameter

I have a data template that is:
<DataTemplate x:Key="CalDescButton">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Style="{StaticResource LargeIconStyle}"
Text="" />
<TextBlock
Grid.Row="0"
Grid.Column="1"
Foreground="Transparent"
Style="{StaticResource MediumIconStyle}"
Text="" />
<TextBlock
Grid.Row="1"
Grid.Column="1"
Foreground="Transparent"
Style="{StaticResource MediumIconStyle}"
Text="" />
<TextBlock
Grid.Row="0"
Grid.Column="1"
Foreground="Transparent"
Style="{StaticResource MediumIconStyle}"
Text="" />
<TextBlock
Grid.Row="1"
Grid.Column="0"
Foreground="Transparent"
Style="{StaticResource MediumIconStyle}"
Text="" />
<TextBlock
Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="0"
Margin="0,-6,0,0"
Foreground="Aqua"
Style="{StaticResource XSmallIconStyle}"
Text="" />
</Grid>
</DataTemplate>
Then I have other 6 where the only thing that changes is the Text Char code.
Those templates are applied to buttons:
<ToggleButton
Command="{Binding CmdSetSorting, Mode=OneWay}"
CommandParameter="CalAsc"
ContentTemplate="{StaticResource CalDescButton}" />
The question is: can I pass a variable to the template and use it in the Text="" instead of having 6 different templates just for that?
How can I do it?
Just to be clear I'd like to have something like:
<DataTemplate x:Key="IconButton">
and then:
ContentTemplate="{StaticResource IconButton ()}" />
set Content property of Button:
<ToggleButton
Command="{Binding CmdSetSorting, Mode=OneWay}"
CommandParameter="CalAsc"
Content=""
ContentTemplate="{StaticResource CalDescButton}" />
it should become DataContext of root element in DataTemplate (because it is ContentTemplate) and will be accessible by Binding:
<TextBlock
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Grid.ColumnSpan="2"
Style="{StaticResource LargeIconStyle}"
Text="{Binding}" />

Toggle button and vertical grid splitter is not working simultaneously

This is my sample code ,Please help me to achieve both goals simultaneouslyImage
On click toggle button collapse and visible column and vertical split button.
In the below fig. First add toggle button and First column contain two column .
It contains second sub column is collapse or disable based on toggle button click.
and Spltter is working on outside two main column please help me as soon as possible
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Border Background="Green"
Grid.Column="0">
<Grid Grid.Column="1"
Visibility="{Binding IsChecked, ElementName=toggleButton, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<WrapPanel Grid.Column="1"
Background="Aqua" />
</Grid>
</Border>
<ToggleButton x:Name="toggleButton"
Width="30"
Height="30"
Margin="0,10,10,0"
IsChecked="True"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
</Grid>
<GridSplitter Width="5"
Grid.Column="1"
ResizeBehavior="CurrentAndNext" />
<Grid Grid.Column="2"></Grid>
</Grid>
From reading your question, I believe this is what you are trying to achieve. Please let me know if I didn't understand you properly.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border
Grid.Column="0"
Background="Green">
<ToggleButton x:Name="toggleButton"
Width="30"
Height="30"
Margin="0,10,10,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsChecked="True" />
</Border>
<Grid
Grid.Column="1"
MaxWidth="300"
Visibility="{Binding ElementName=toggleButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
<WrapPanel Background="Aqua">
<TextBlock
Margin="8"
Text="Item 01" />
<TextBlock
Margin="8"
Text="Item 02" />
<TextBlock
Margin="8"
Text="Item 03" />
<TextBlock
Margin="8"
Text="Item 04" />
<TextBlock
Margin="8"
Text="Item 05" />
</WrapPanel>
</Grid>
<GridSplitter
Grid.Column="1"
Width="5"
Visibility="{Binding ElementName=toggleButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Grid Grid.Column="3">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Column 2" />
</Grid>
</Grid>

WPF Scrollviewer Can't scroll horizontally

I can't find a way to make these images in a scrollviewer horizontally.
They're like this
IMAGE1
IMAGE2
IMAGE3
I want
IMAGE1 IMAGE2 IMAGE3
So I can scroll them horizontally. I've already tried google and stackoverflow and I can't find a working solution :(
Code
<Window x:Class="TESSTTTTTT.MirrorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MirrorWindow" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStyle="None">
<Grid Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Name="ColumnKinect">
<Image Name="camera2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--
<Canvas Name="canvas2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />-->
<Image Name="imgBodyFrame" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200"/>
<!--Stretch="UniformToFill"-->
<Image Name="img3DBodyRotation" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="1" Height="1800" Width="3200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="ColumnCatalogo">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewerCatalogo" Background="AliceBlue"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible">
<ItemsControl Grid.Row="0" Name="itemsControl" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<ItemsControl Name="itcCatalogo" HorizontalContentAlignment="Left">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox Width="Auto" Height="Auto" HorizontalContentAlignment="Left">
<WrapPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<StackPanel Name="stpProduct" Orientation="Vertical">
<TextBlock Width="Auto" Height="Auto" Text="{Binding Nome}" Foreground="#006b66" FontFamily="Verdana" FontSize="14" FontWeight="ExtraBold"/>
<Image Width="400" Height="300" Source="{Binding PathImmagine}"/>
<TextBlock Width="Auto" Height="Auto" Foreground="#006b66" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
<Run Text="Prezzo a partire da: "/>
<LineBreak/>
<Run Text="{Binding Prezzo}"/>
<Run Text="€"/>
</TextBlock>
<TextBlock Width="Auto" Height="Auto" Text="{Binding Rigidita}" Foreground="Gray" FontFamily="Verdana" FontSize="20" FontWeight="ExtraBold"/>
</StackPanel>
</WrapPanel>
</ListBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Window>
I am not sure you are speaking about images, Image1 Image2 Image3. You would have mentioned them in the given code snippet. As I am not sure about the ques, I have added 2 scenarios.
Scenario 1: I could see 3 Image control in the 0th Column. If you need them to be shown horizontally, you could use StackPanel instead of Grid, and can use the Orientation property as Horizontal. or you need to add 3 columns to the 0th Column Grid, and you can add those images respectively.
Scenario 2: and in the 1st Grid, you have a scrollviewer, if you need the image controls to be visible horizontally inside those, the same you could use the Orientation property of StackPanel (stackpanel inside the wrappanel) to Horizontal instead of Vertical.
Hope this helps you.
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<StackPanel Orientation="Horizontal">
<Button Content="Button1" Foreground="Red" />
<Button Content="Button2" Foreground="Red" />
<Button Content="Button3" Foreground="Red" />
<Button Content="Button4" Foreground="Red" />
<Button Content="Button5" Foreground="Red" />
<Button Content="Button6" Foreground="Red" />
</StackPanel>
</ScrollViewer>
Try this way, adding a custom panel template to your listbox that is horizontal.
<Window x:Class="TESSTTTTTT.MirrorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MirrorWindow" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStyle="None">
<Grid Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Name="ColumnKinect">
<Image Name="camera2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--
<Canvas Name="canvas2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />-->
<Image Name="imgBodyFrame" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200"/>
<!--Stretch="UniformToFill"-->
<Image Name="img3DBodyRotation" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="1" Height="1800" Width="3200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="ColumnCatalogo">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewerCatalogo" Background="AliceBlue"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible">
<ItemsControl Grid.Row="0" Name="itemsControl" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<ItemsControl Name="itcCatalogo" HorizontalContentAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox Width="Auto" Height="Auto" HorizontalContentAlignment="Left">
<WrapPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<StackPanel Name="stpProduct" Orientation="Vertical">
<TextBlock Width="Auto" Height="Auto" Text="{Binding Nome}" Foreground="#006b66" FontFamily="Verdana" FontSize="14" FontWeight="ExtraBold"/>
<Image Width="400" Height="300" Source="{Binding PathImmagine}"/>
<TextBlock Width="Auto" Height="Auto" Foreground="#006b66" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
<Run Text="Prezzo a partire da: "/>
<LineBreak/>
<Run Text="{Binding Prezzo}"/>
<Run Text="€"/>
</TextBlock>
<TextBlock Width="Auto" Height="Auto" Text="{Binding Rigidita}" Foreground="Gray" FontFamily="Verdana" FontSize="20" FontWeight="ExtraBold"/>
</StackPanel>
</WrapPanel>
</ListBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Window>

Silverlight : How to access control in DataGrid RowDetailTemplate

I have below code and I wanted to get the "btnUpdate" button control in the RowDetailsTemplate and set the visibility in code behind. How can I do that? Any advice is appreciated and thanks in advance.
<Grid x:Name="LayoutRoot" Background="White">
<Grid HorizontalAlignment="Left" Name="grid1" VerticalAlignment="Top" >
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Grid HorizontalAlignment="Left" Name="grid2" VerticalAlignment="Top" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" />
<ColumnDefinition Width="80*" />
<ColumnDefinition Width="111*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Content="Refresh" Click="btnRefresh_Click" Grid.Column="1" Height="23" HorizontalAlignment="Right" Name="btnRefresh" VerticalAlignment="Top" Width="80"/>
<Button Content="Add" Click="btnAdd_Click" Grid.Column="2" Height="23" HorizontalAlignment="Right" Name="btnInsert" VerticalAlignment="Top" Width="80" />
<sdk:Label Height="28" HorizontalAlignment="Left" Name="Title" VerticalAlignment="Top" Content="Title" HorizontalContentAlignment="Left" FontSize="20" FontWeight="Bold" Width="Auto"/>
</Grid>
<data:DataGrid x:Name="OverviewDataGrid" Grid.Row="1" AutoGenerateColumns="False" RowEditEnded="OverviewDataGrid_RowEditEnded" SelectionChanged="OverviewDataGrid_SelectionChanged">
<data:DataGrid.Columns>
<data:DataGridTextColumn Header="Code" Binding="{Binding code, TargetNullValue=(enter code)}" IsReadOnly="True"></data:DataGridTextColumn>
<data:DataGridTextColumn Header="Description" Binding="{Binding description}" IsReadOnly="True"></data:DataGridTextColumn>
<data:DataGridTemplateColumn Header="Delete">
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btnDelete" Content="Delete" Click="btnDelete_Click"></Button>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
<data:DataGridTemplateColumn >
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="btnCollapse" Grid.Column="0" Grid.Row="0" Content="+" Click="btnCollapse_Click" HorizontalAlignment="Center" Width="20" VerticalAlignment="Center" />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
<data:DataGrid.RowDetailsTemplate>
<DataTemplate>
<Border BorderThickness="0" Background="BlanchedAlmond" Padding="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.17*"/>
<ColumnDefinition Width="0.30*"/>
<ColumnDefinition Width="0.17*"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock FontSize="12" Text="Code : " VerticalAlignment="Center" Grid.Column="0" Grid.Row="0" Margin="1"/>
<TextBlock FontSize="12" FontWeight="Bold" Foreground="MidnightBlue" Text="{Binding code}" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="0" Margin="1" Grid.ColumnSpan="3"/>
<TextBlock FontSize="12" Text="Description: " VerticalAlignment="Center" Grid.Column="0" Grid.Row="1" Margin="1"/>
<TextBox FontSize="12" Text="{Binding description, Mode=TwoWay}" Width="350" TextWrapping="NoWrap" HorizontalAlignment="Left"
AcceptsReturn="True" Grid.Column="1" Grid.Row="1" Margin="1" Grid.ColumnSpan="3"/>
<Button x:Name="btnUpdate1" Content="Update" Click="btnUpdate_Click" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="4" Margin="1"/>
</Grid>
</Border>
</DataTemplate>
</data:DataGrid.RowDetailsTemplate>
</data:DataGrid>
</Grid>
</Grid>
Follow below steps to get the control in RowDetailsTemplate.
Add loadingRowDetails event {LoadingRowDetails="yourDataGrid_LoadingRowDetails"} into datagrid in xaml.
Add below code at xaml class
private void yourDataGrid_LoadingRowDetails(object sender, DataGridRowDetailsEventArgs e)
{
Button btn = (e.DetailsElement as FrameworkElement).FindName("btnUpdate") as Button;
if (ok.Equals(false))
btn.Visibility = System.Windows.Visibility.Collapsed;
}

forcing scrollbars to appear in listbox

Hi can I force scrollbars to appear in listbox when its content do not fit. I really need it.
To create tabcontrol item I concucted this xaml:
<TabControl.ContentTemplate>
<DataTemplate>
<ScrollViewer VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Visible">
<Grid Name="RssFeedContainerGrid" >
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<controls:ucRssFeed Grid.Row="1" RssUri="{Binding FeedUri}" />
</Grid>
</ScrollViewer>
</DataTemplate>
</TabControl.ContentTemplate>
and ucRssFeed contains listbox.
Here some xaml from that control where I want scrolling to take place:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="10" x:Name="RssFeedCellblock">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Margin="10" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="0">
<!-- Topic label-->
<TextBlock Cursor="Hand" FontWeight="Bold" Text="{Binding XPath=title}" Tag="{Binding XPath=link}" Foreground="{StaticResource RSS_Topic_Title}" MouseDown="TextBlock_MouseDown">
</TextBlock>
<!-- Breakline -->
<Line Stroke="{StaticResource RSS_Topic_Title}" Y1="5" Y2="5" X1="0" X2="{Binding ElementName=NewsListBox, Path=ActualWidth}" Opacity="0.7" StrokeThickness="1"/>
<!-- publication date label -->
<TextBlock Text="{Binding XPath=pubDate}" Opacity="0.5" />
<!-- Description textblock -->
<TextBlock FontSize="10" FontFamily="Times New Roman" x:Name="descriptionTextBlock"
Text="{Binding XPath=description, Converter={StaticResource HtmlToPlainTextConverter}}" Margin="10"
TextWrapping="Wrap" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You need to set the Height property of your ListBox for the Scrollbar to appear listbox automatically show scrollbar when the content is more

Resources