Horizontal to vertical WrapPanel in WPF

Question

I try build wrap panel with vertical buttons. Every button consist from image and textblock. I want to do something that Microsoft did in the Outlook on the left side of the window, when the user move the GridSplitter. When the user will reduce the height of the wrap panel, if any button will not has place, the textblock will disappear (the button will consist just from image).

How can I do that.

Thank

score 1 · Accepted Answer · answered Apr 05 '12 at 16:01

If I understand correctly. You want to show buttons with Text and an Image, but if the width of the button is reduced to a certain size, it will only show the image.

If so, you should be able to implement with a datatrigger.

<Window x:Class="StackOverflow1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:StackOverflow1"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <local:isLessThanConverter x:Key="MyisLessThanConverter"/>
    <Style x:Key="myWidthTrigger" TargetType="TextBlock">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType=Button}, Converter={StaticResource MyisLessThanConverter}, ConverterParameter=90}" Value="True">
                    <Setter Property="Visibility" Value="Collapsed" />
                </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <ListView HorizontalContentAlignment="Stretch">
        <Button x:Name="myButton" Width="Auto">
            <StackPanel Orientation="Horizontal">
                <TextBlock x:Name="MyTextBlock" Style="{StaticResource myWidthTrigger}" Text="Test"></TextBlock>
                <Image Source="image.png" Height="15"></Image>
            </StackPanel>
        </Button>
    </ListView>
    <GridSplitter Width="5" Grid.Column="1" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"></GridSplitter>
</Grid>

Also using this IValueConvertor:

[ValueConversion(typeof(double), typeof(string))]
public class isLessThanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
            if ((double)value < double.Parse((string)parameter))
            {
                return true;
            }
            else
            {
                return false;
            }

    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

}

I am not an expert at this, so there may be a cleaner way. I also used a listview instead of your requested wrappanel.

Hope this helps

Thanks Brent! It was very halpful. – Amir Brand Apr 08 '12 at 07:38 — Amir Brand, Apr 08 '12 at 07:38

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

It sounds like what you want to use is an Expander control. This StackOverflow post explains how to make the other Expanders close automatically when you open another. This will work just like what you're describing in Outlook.

edited May 23 '17 at 12:04

Community

1
1

answered Apr 05 '12 at 14:26

Chris Benard

3,167
2
29
35

Thanks Chris! I don't talk about the expander (the button that minimize the side of the window). I talking about the GridSplitter that when you take it up or down, the buttons text is disappears. Do you know how to do that? – Amir Brand Apr 05 '12 at 14:39
Maybe you can post XAML and code as an example of what you're trying to do and we can help you more. – Chris Benard Apr 05 '12 at 15:05

Horizontal to vertical WrapPanel in WPF

2 Answers2