WPF中水平垂直WrapPanel

Question

我嘗試使用垂直按鈕構建包裝面板。 每個按鈕由圖像和文本塊組成。 我想做一些微軟在窗口左側的Outlook中執行的操作，當用戶移動GridSplitter時，窗口左邊的是 。 當用戶將降低包裝面板的高度時，如果有任何按鈕將不存在，則文本塊將消失（該按鈕將僅由圖像組成）。

我該怎麼做。

感謝

Answer 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(); 
    } 

} 

我不是這方面的專家，所以有可能是一個更清潔的方式。我也使用了一個列表視圖，而不是你所請求的wrappanel。

希望這會有幫助

Answer 2

這聽起來像你想使用什麼是Expander控制。這個StackOverflow post解釋瞭如何在打開另一個時自動關閉其他Expander。這將像你在Outlook中描述的那樣工作。