XAML ListBox - How to change style of last item only? - c#

I have a RadDataBoundListBox (from Telerik) that represents the items of a List. Each item is separated by a bottom line x:Name="ItemSeparatorBorder". The ListBox itself has a header and a footer containing a line too (x:Name="ListTopBorder"and x:Name="ListBottomBorder"). Now I need a way to disable the line (x:Name="ItemSeparatorBorder") of the last item in this ListBox.
I thought about some Visibility binding to x:Name="ItemSeparatorBorder" with a Converter that matches the index of the current item to the total count of the ListBox. But I don't know how to implement it and I can't find any good sample.
The code should work on Windows Phone 8.0 / .NET 4.0.
This is my code so far:
<telerikPrimitives:RadDataBoundListBox
x:Name="ListBox"
ItemsSource="{Binding Items}">
<telerikPrimitives:RadDataBoundListBox.ListHeaderTemplate>
<DataTemplate>
<Grid Height="30">
<Border
x:Name="ListTopBorder"
Height="1"
VerticalAlignment="Bottom"
Background="Blue"/>
</Grid>
</DataTemplate>
</telerikPrimitives:RadDataBoundListBox.ListHeaderTemplate>
<telerikPrimitives:RadDataBoundListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
</Grid.RowDefinitions>
<controls:ListItem Margin="30,10,0,10">/>
<Border
x:Name="ItemSeparatorBorder"
Grid.Row="1"
Height="1"
Background="Blue"
Margin="30,0,0,0"/>
</Grid>
</DataTemplate>
</telerikPrimitives:RadDataBoundListBox.ItemTemplate>
<telerikPrimitives:RadDataBoundListBox.ListFooterTemplate>
<DataTemplate>
<Grid Height="30">
<Border
x:Name="ListBottomBorder"
Height="1"
VerticalAlignment="Top"
Background="Blue"/>
</Grid>
</DataTemplate>
</telerikPrimitives:RadDataBoundListBox.ListFooterTemplate>
</telerikPrimitives:RadDataBoundListBox>
How can I hide the Border of the last item?
To make it more clear, I want to remove the last blue line here:

I think the best approach is to use an IValueConverter that gets a reference to the items collection. Make a converter that inherits DependencyObject, and give it a property for the source list. Then you can check the current item index:
public class ItemToVisibilityConverter : DependencyObject, IValueConverter
{
public IList Items
{
get { return (IList )GetValue(ItemsProperty); }
set { SetValue(ItemsProperty, value); }
}
public static readonly DependencyProperty ItemsProperty=
DependencyProperty.Register("Items", typeof(IList), typeof(ItemToVisibilityConverter), new PropertyMetadata(null));
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
bool hide = Items != null
&& value != null
&& Items.IndexOf(value) == Items.Count - 1;
return (hide ? Visibility.Collapsed : Visibility.Visible);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException;
}
}
The put a converter instance in the control's resources:
<telerikPrimitives:RadDataBoundListBox
x:Name="ListBox"
ItemsSource="{Binding Items}">
<telerikPrimitives:RadDataBoundListBox.Resources>
<ResourceDictionary>
<local:ItemToVisibilityConverter x:Key="ItemToVisibilityConverter"
Items="{Binding Items}" />
</ResourceDictionary>
</telerikPrimitives:RadDataBoundListBox.Resources>
...
</telerikPrimitives:RadDataBoundListBox>
Finally, in the "ItemTemplate", bind to the current item using the converter:
<Border x:Name="ItemSeparatorBorder"
Visibility="{Binding Converter={StaticResource ItemToVisibilityConverter}}"
... />

Related

Top Dock in a DockPanel is taking all the space

My code looks something like this:
<DockPanel>
<Expander DockPanel.Dock="Top" Name="Expander1">
<local:ListView1 DataContext="{Binding Source1}"/>
</Expander>
<Expander DockPanel.Dock="Top" Name="Expander2">
<local:ListView1 DataContext="{Binding Source2}"/>
</Expander>
<Expander DockPanel.Dock="Top" Name="Expander3">
<local:ListView1 DataContext="{Binding Source3}"/>
</Expander>
</DockPanel>
ListView1 is just a user control that contains a ListView
I have the behavior set: when one Expander is open, all the other 2 Expanders will close.
The problem is that when Expander1 is open and its content is more than the window height, it will have a scroll bar to scroll down for its content while Expander2 and Expander3 are not displayed. I think Expander1 uses all the space on the UI and Expander2 & Expander3 get pushed out side of the UI. When Expander2 is open, Expander3 is pushed out of the UI and not displayed. What can I do so that when I open an Expander, the one(s) below it won't get pushed out of the UI?
You said you're only allowing one open at a time.
Given that then the size logic is simpler and you could use just a converter with a fixed number.
My PoC:
<DockPanel>
<Expander DockPanel.Dock="Top" MaxHeight="{Binding ActualHeight,
RelativeSource={RelativeSource AncestorType=ContentPresenter},
Converter={local:AddConverter ValueToAdd=-46}}">
<ListBox ItemsSource="{Binding Items}"/>
</Expander>
<Expander DockPanel.Dock="Top" MaxHeight="{Binding ActualHeight,
RelativeSource={RelativeSource AncestorType=ContentPresenter},
Converter={local:AddConverter ValueToAdd=-46}}">
<ListBox ItemsSource="{Binding Items}"/>
</Expander>
<Expander DockPanel.Dock="Top" MaxHeight="{Binding ActualHeight,
RelativeSource={RelativeSource AncestorType=ContentPresenter},
Converter={local:AddConverter ValueToAdd=-46}}">
<ListBox ItemsSource="{Binding Items}"/>
</Expander>
</DockPanel>
And the converter
public class AddConverter : MarkupExtension, IValueConverter
{
public double ValueToAdd { get; set; }
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
double bound = (Double)value;
return bound + ValueToAdd;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return null;
}
public override object ProvideValue(IServiceProvider serviceProvider)
{
return this;
}
}
As I mentioned in the comments.
You could make this more sophisticated with a multibinding and multiconverter. That could allow for height when 2 are open.

Show XAML on Condition

The context is I have a Listbox that is outputting items with quite a lot of styling (more than i've put here)... I went to use a DataTemplateSelector to show either one image or another based on a condition but it was stupid to have to re-write the whole tempalte with just this one difference in it.
I have placed some pseudo code to demonstrate what i'm trying to achieve:
<ListBox Grid.Row="1"
ItemsSource="{Binding TestCases}"
BorderThickness="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Padding="0,5,0,5">
<Run Text="{Binding Class}"></Run>
</TextBlock>
<TextBlock Grid.Column="1"
Padding="5">
<Run Text="{Binding Assertions}"></Run>
</TextBlock>
if {Binding Failures} > 0 {
<Image HorizontalAlignment="Center"
Width="10"
Height="10"
Grid.Column="2"
Source="/Content/Images/Cross.png">
</Image>
}
else
{
<Image HorizontalAlignment="Center"
Width="10"
Height="10"
Grid.Column="2"
Source="/Content/Images/Tick.png">
</Image>
}
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Any ideas on how i do it?
-------------Edit------------
So far i've added the namespace of my converter class to the XAML file:
xmlns:converters="clr-namespace:Blah.Blah.Converters"
Then added window resources:
<Window.Resources>
<converters:FailuresTickConverter x:Key="failuresTickConverter" />
<converters:FailuresCrossConverter x:Key="failuresCrossConverter" />
</Window.Resources>
Then i have the classes themselves:
namespace Blah.Blah.Converters
{
public class FailuresTickConverter : IValueConverter
{
public object Convert( object value, Type targetType,
object parameter, CultureInfo culture )
{
int failures = (int)value;
if( failures > 0 )
return Visibility.Hidden;
return Visibility.Visible;
}
public object ConvertBack( object value, Type targetType,
object parameter, CultureInfo culture )
{
throw new NotImplementedException();
}
}
public class FailuresCrossConverter : IValueConverter
{
public object Convert( object value, Type targetType,
object parameter, CultureInfo culture )
{
int failures = ( int )value;
if( failures > 0 )
return Visibility.Visible;
return Visibility.Hidden;
}
public object ConvertBack( object value, Type targetType,
object parameter, CultureInfo culture )
{
throw new NotImplementedException();
}
}
}
Then in my XAML on the images i've done this:
<Image Visibility="{Binding Failures, Converter=failuresTickConverter}"
HorizontalAlignment="Center"
Width="10"
Height="10"
Grid.Column="2"
Grid.Row="0"
Source="/Content/Images/Tick.png">
</Image>
<Image Visibility="{Binding Failures, Converter=failuresCrossConverter}"
HorizontalAlignment="Center"
Width="10"
Height="10"
Grid.Column="2"
Grid.Row="0"
Source="/Content/Images/Cross.png">
</Image>
I'm getting an error on the bindings:
IValueConverter does not support converting from string
Elaborating on my comment, here's a simple (not the only one, of course) way to do it:
Create a converter to convert number to visibility:
public class PositiveToVisibilityConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return (int)value > 0 ? Visibility.Visible : Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Add the namespace of the converter to your xaml, add the converter to resources (use your own namespace of course):
<Window ...
xmlns:converters="clr-namespace:WpfApplication1.Converters"
...>
<Window.Resources>
<converters:PositiveToVisibilityConverter x:Key="PositiveConverter"/>
</Window.Resources>
Then put both the images in, the "success" one first and bind the property using the converter to the "failure" one:
<Image HorizontalAlignment="Center"
Width="10"
Height="10"
Grid.Column="2"
Source="/Content/Images/Tick.png"
Visibility="{Binding Failures, Converter={StaticResource PositiveConverter}}">
</Image>
<Image HorizontalAlignment="Center"
Width="10"
Height="10"
Grid.Column="2"
Source="/Content/Images/Cross.png">
</Image>
Since these images are in a grid (I assume) and have the same position and size, they will overlap and normally the one that's defined last will be drawn last, so the first one will not be visible. That is, unless the binding makes the second image invisible.

WPF ComboBox as System.Windows.Media.Colors

Wanting to get the color combobox (see image) behavior in my WPF ListView column.
Can someone help me get this started? I am comfortable with ListView binding but not sure how to implement this.
EDIT:
xmlns:System="clr-namespace:System;assembly=mscorlib"
<ObjectDataProvider MethodName="GetValues"
ObjectType="{x:Type System:Enum}"
x:Key="ColorList">
<ObjectDataProvider.MethodParameters>
<x:Type TypeName="Windows.Media.Color" />
</ObjectDataProvider.MethodParameters>
</ObjectDataProvider>
Tells me type provided must be an enum.
Best Answer I have found:
How can I list colors in WPF with XAML?
ComboBox with ItemTemplate
You will have to use ItemTemplate for you ComboBox items:
<ComboBox ItemsSource="{Binding NamedColors}"
xmlns:converters="clr-namespace:TestLab.WPF">
<ComboBox.Resources>
<converters:ColorToSolidBrushConverter x:Key="ColorToBrush"/>
</ComboBox.Resources>
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border BorderThickness="0" Height="20" Width="20"
Background="{Binding Value, Converter={StaticResource ColorToBrush}}"/>
<TextBlock Text="{Binding Key}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Brush converter
Also, you will need a color to brush converter, because binding doesn't do it automatically:
public class ColorToSolidBrushConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return new SolidColorBrush((Color)value);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Color name - color pair creation
And here is how you can create the color Name - color pairs (currently it is an instance method in the main Window class, but you can refactor it to some helper class):
private IEnumerable<KeyValuePair<String, Color>> GetColors()
{
return typeof(Colors)
.GetProperties()
.Where(prop =>
typeof(Color).IsAssignableFrom(prop.PropertyType))
.Select(prop =>
new KeyValuePair<String, Color>(prop.Name, (Color)prop.GetValue(null)));
}
Window code
And this is the window:
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.NamedColors = this.GetColors();
this.DataContext = this;
}
public IEnumerable<KeyValuePair<String, Color>> NamedColors
{
get;
private set;
}
}
ObjectDataProvider
Some code file:
public namespace SomeNamespace
{
public static class ColorHelper
{
public static IEnumerable<KeyValuePair<String, Color>> GetColors()
{
return typeof(Colors)
.GetProperties()
.Where(prop =>
typeof(Color).IsAssignableFrom(prop.PropertyType))
.Select(prop =>
new KeyValuePair<String, Color>(prop.Name, (Color)prop.GetValue(null)));
}
}
}
XAML object data provider:
...
xmlns:someNamespace="clr-namespace:SomeNamespace"
...
<ObjectDataProvider MethodName="GetColors"
ObjectType="{x:Type someNamespace.ColorHelper}"
x:Key="ColorList">
</ObjectDataProvider>
XAML comboBox:
<ComboBox ItemsSource="{Binding ColorList}" ...
Should be something like this :
<ComboBox ItemsSource="{Binding ItemSourceObs}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{Binding Color}" Height="10" Width="10" />
<TextBlock Text="{Binding DisplayedText}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Where DisplayesText and Color (type of Brushes) are properties of an object lets say A and ItemSourceObs is ObservableCollection of type A
This approach is based on MVVM pattern
Using code behind working solution :
<ComboBox x:Name="ComboColor" Width="50" Height="50" >
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{Binding Name}" Width="16" Height="16" Margin="0,2,5,2" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
And code behind :
public MainWindow()
{
InitializeComponent();
ComboColor.ItemsSource = typeof(Colors).GetProperties();
}

Xaml ResourceKey as a variable not working

I'm using a ComboBox (WPF 4.0) to show user defined paragraph styles for an editor app. The ComboBox has two columns:
(1) Name of the paragraph style
(2) Text "abcABC123", should in some properties be formatted according to the paragraph style in the first column
(1) is working, (2) is not because _ResourceKey_background, _ResourceKey_foreground and _ResourceKey_fontFamily are no ResourceKeys
but variables containing ResourceKeys. How can I solve this?
_NameInternal, _NameUI, _ResourceKey_background, _ResourceKey_foreground and _ResourceKey_fontFamily are public properties
of the user defined paragraph style class.
<ComboBox Name="_cbStylesPara" SelectedValuePath="_NameInternal"
ItemsSource="{Binding Source={StaticResource _collectionViewSource_stylesPara}}" >
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Text="{Binding _NameUI}" VerticalAlignment="Center" />
<TextBlock Grid.Column="1" Text="abcABC123" Margin="3,0,0,0" VerticalAlignment="Center"
Background="{DynamicResource _ResourceKey_background}"
Foreground="{DynamicResource _ResourceKey_foreground}"
FontFamily="{DynamicResource _ResourceKey_fontFamily}" />
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
As like you said resources are declared under App resources, what you can do is create an IValueConverter and return the resource value from it's Convert method.
public class ResouceLookupConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
return App.Current.TryFindResource(value);
}
public object ConvertBack(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
return Binding.DoNothing;
}
}
XAML:
<ComboBox>
<ComboBox.Resources>
<local:ResouceLookupConverter x:Key="ResouceLookupConverter"/>
</ComboBox.Resources>
......
<TextBlock Grid.Column="1" Text="abcABC123" Margin="3,0,0,0"
VerticalAlignment="Center"
Background="{Binding _ResourceKey_background,
Converter={StaticResource ResouceLookupConverter}}"
Foreground="{Binding _ResourceKey_foreground,
Converter={StaticResource ResouceLookupConverter}}"
FontFamily="{Binding _ResourceKey_fontFamily,
Converter={StaticResource ResouceLookupConverter}}" />
</ComboBox>
Note: Ofcourse you have to define local namespace in your XAML set to the namespace where your Converter is declared.

How to Toggle the Visibility of an Item in a StackPanel

I have a ListBox which contains a StackPanel of two items, an Image and a Textblock. At the user's request, I would like to be able to toggle the visibility of the TextBlock on or off, thus only showing the Images. As it is now, the Image and TextBlock combination for each item is stacked vertically, and the Image is a perfect square (which ultimately creates a rectangular shape when the TextBlock is shown under each image). When the user wishes to hide the TextBlock, I would like to have the ListBox show only the StackPanel items as uniform squares for the Images (hopefully that made sense).
What I have is as follows
<ListBox Name="ListBoxEffects" SelectionMode="Single" ItemsSource="{Binding}" Margin="{Binding}"
toolkit:TiltEffect.IsTiltEnabled="True" SelectionChanged="ListBox_SelectionChanged"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemWidth="159" ItemHeight="Auto" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<Image Source="{Binding Thumbnail}" Width="155" Height="155" />
<TextBlock Text="{Binding Name}" Visibility="{Binding TextBlockVisibility}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And in the ApplicationBar created in the code behind is where I have a menu item which will allow a user to select his or her preference on showing or hiding the TextBlock under each Image
private void BuildLocalizedApplicationBar()
{
ApplicationBar = new ApplicationBar();
ApplicationBarMenuItem showFilterNamesMenuItem = new ApplicationBarMenuItem();
if (Settings.ShowFilterNames.Value)
showFilterNamesMenuItem.Text = "Hide names";
else
showFilterNamesMenuItem.Text = "Show names";
showFilterNamesMenuItem.Click += showFilterNamesMenuItem_Click;
ApplicationBar.MenuItems.Add(showFilterNamesMenuItem);
}
void showFilterNamesMenuItem_Click(object sender, EventArgs e)
{
if(Settings.ShowFilterNames.Value)
{
((ApplicationBarMenuItem)ApplicationBar.MenuItems[0]).Text = "Hide names";
Settings.ShowFilterNames.Value = false;
//Toggle the text block visibility to show text here
}
else
{
((ApplicationBarMenuItem)ApplicationBar.MenuItems[0]).Text = "Show names";
Settings.ShowFilterNames.Value = true;
//Toggle the text block visibility to hide text here
}
}
And a check is performed when the page is navigated to so that the TextBlock's under each image can be shown or hidden appropriately
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
if (Settings.ShowFilterNames.Value)
//Show the TextBlocks here
else
//Hide the TextBlocks here
}
As far as I can tell the above implementation does toggle the menu item text correctly and saves the user's preference so that upon returning the menu item text is displayed according to the last selection the user chose, but I am unsure of how to change the visibility of the TextBlock underneath each image in the ListBox?
EDIT**
BooleanToVisibilityConverter.cs
//Error on BooleanToVisibilityConverter stating does not implement interface member 'System.Windows.Data.IValueConverter.Convert(object, System.Type, object, System.Globalization.CultureInfo)
public class BooleanToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo language)
{
return (value is bool && (bool)value) ? Visibility.Visible : Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo language)
{
return value is Visibility && (Visibility)value == Visibility.Visible;
}
}
and in XAML
xmlns:common="clr-namespace:TestApp.Common"
<phone:PhoneApplicationPage.Resources>
<common:BooleanToVisibilityConverter x:Key="BoolToVisConv" />
</phone:PhoneApplicationPage.Resources>
<ListBox Name="ListBoxEffects" SelectionMode="Single" ItemsSource="{Binding}" Margin="{Binding}"
toolkit:TiltEffect.IsTiltEnabled="True" SelectionChanged="ListBox_SelectionChanged"
ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemWidth="159" ItemHeight="Auto" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<Image Source="{Binding Thumbnail}" Width="155" Height="155" />
<TextBlock Text="{Binding Name}" Visibility="{Binding IsTextBlockVisible, Converter={StaticResource BoolToVisConv}}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use this method to find out your Textblock for each ListBoxItem
public static T FindFirstElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
{
try
{
int childCount = VisualTreeHelper.GetChildrenCount(parentElement);
if (childCount == 0)
return null;
for (int i = 0; i < childCount; i++)
{
var child = VisualTreeHelper.GetChild(parentElement, i);
if (child != null && child is T)
{
return (T)child;
}
else
{
var result = FindFirstElementInVisualTree<T>(child);
if (result != null)
return result;
}
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
return null;
}
This Method will return First element of specified type from your DataTemplate. And allows you to work with that indivisual element.
For this You can use following code snippet
for(i=0;i<ListBoxEffects.count;i++)
{
ListBoxItem item = ListBoxEffects.ItemContainerGenerator.ContainerFromIndex(i) as ListBoxItem;
StackPanel TargetStackPanel = common.FindFirstElementInVisualTree<StackPanel>(item);
TextBlock TargetTextBlock= TargetStackPanel.Children[1] as TextBlock;
TargetTextBlock.Visibility = Visibility.Visible;
ListBoxEffects.UpdateLayout();
}
Use the above code to show or hide the textblocks respectively Just by changing the line
TargetTextBlock.Visibility = Visibility.Visible;
or
TargetTextBlock.Visibility = Visibility.Collapsed;
The Visibility property is an enum of type Visibility. This would be quite a bit easier if it were a boolean, but it's not.
You should define a static resource to instantiate a BooleanToVisibility converter, then bind the Visibility property to a boolean property in your DataContext. Here's a working example:
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisConv" />
</Window.Resources>
<StackPanel>
<TextBlock Text="Hide me" Visibility="{Binding IsTextBlockVisible, Converter={StaticResource BoolToVisConv}}" />
<Button Content="Toggle TextBlock" Name="ToggleItButton" Click="ToggleItButton_Click" />
</StackPanel>
public partial class MainWindow : Window, INotifyPropertyChanged {
private bool m_IsTextBlockVisible = true;
public bool IsTextBlockVisible {
get { return m_IsTextBlockVisible; }
set { m_IsTextBlockVisible = value; NotifyPropertyChanged("IsTextBlockVisible"); }
}
public MainWindow() {
InitializeComponent();
DataContext = this;
}
private void ToggleItButton_Click(object sender, RoutedEventArgs e) {
IsTextBlockVisible = !IsTextBlockVisible;
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string name) {
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
You can create two DataTemplate. One DataTemplate with name and the other one without name.
XAML:
<Window ...
>
<Window.Resources>
<DataTemplate x:Key="TemplateWithName">
<StackPanel Orientation="Vertical" >
<Image Source="{Binding Thumbnail}" Width="155" Height="155" />
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="TemplateWithoutName">
<StackPanel Orientation="Vertical" >
<Image Source="{Binding Thumbnail}" Width="155" Height="155" />
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel>
<ToggleButton x:Name="tbName" Content="Name" Click="tbName_Click" />
</StackPanel>
<ListBox Name="ListBoxEffects" SelectionMode="Single" ItemsSource="{Binding}"
Grid.Row="1" ItemTemplate="{StaticResource TemplateWithName}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel ItemWidth="159" ItemHeight="Auto" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Window>
Code-behind:
private void tbName_Click(object sender, RoutedEventArgs e)
{
if (tbName.IsChecked.Value)
{
ListBoxEffects.ItemTemplate = this.FindResource("TemplateWithoutName") as DataTemplate;
}
else
{
ListBoxEffects.ItemTemplate = this.FindResource("TemplateWithName") as DataTemplate;
}
}
Matthew, addition to your question:
public class BooleanToVisibilityConverter : IValueConverter
{
private object GetVisibility(object value)
{
if (!(value is bool))
return Visibility.Collapsed;
bool objValue = (bool)value;
if (objValue)
{
return Visibility.Visible;
}
return Visibility.Collapsed;
}
public object Convert(object value, Type targetType, object parameter, string language)
{
return GetVisibility(value);
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}

Categories

Resources