WPF中的水平到垂直WrapPanel答案

【问题标题】：Horizontal to vertical WrapPanel in WPFWPF中的水平到垂直WrapPanel
【发布时间】：2012-04-19 07:04:41
【问题描述】：

我尝试使用垂直按钮构建环绕面板。每个按钮由图像和文本块组成。我想做一些微软在窗口左侧的 Outlook 中所做的事情，当用户移动 GridSplitter。当用户会降低环绕面板的高度时，如果任何按钮没有位置，文本块将消失（按钮将仅由图像组成）。

我该怎么做。

谢谢

【问题讨论】：

标签： c# wpf wrappanel

【解决方案1】：

如果我理解正确的话。您想显示带有文本和图像的按钮，但如果按钮的宽度减小到一定大小，它只会显示图像。

如果是这样，您应该可以使用数据触发器来实现。

<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>

也使用这个 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();
    }

}

我不是这方面的专家，所以可能有更简洁的方法。我还使用了列表视图而不是您要求的包装面板。

希望对你有帮助

【讨论】：

谢谢布伦特！这是非常halpful。

【解决方案2】：

听起来您想要使用的是Expander 控件。这个StackOverflow post 解释了如何在你打开另一个Expanders 时自动关闭另一个Expanders。这将与您在 Outlook 中描述的一样工作。

【讨论】：

谢谢克里斯！我不谈论扩展器（最小化窗口侧面的按钮）。我说的是 GridSplitter，当您将其向上或向下时，按钮文本会消失。你知道怎么做吗？
也许您可以发布 XAML 和代码作为您尝试做的示例，我们可以为您提供更多帮助。