模板化的 silverlight 按钮无法正确调整大小

发布于 2024-10-28 18:18:31 字数 1994 浏览 1 评论 0原文

我想创建一个类似于 Visual Studio-s 打开文档条带的 UI。主要思想是,我有一个列表框,我在其中填充打开文档的缩略图。我应用了以下模板:

<DataTemplate x:Key="ListBoxItemTemplate">
    <Grid x:Name="grid" Height="23" d:DesignWidth="100">
        <Rectangle x:Name="background" Grid.ColumnSpan="3" 
            Stretch="Fill" Fill="{StaticResource LinearMain02}" Margin="0"/>
      <TextBlock Text="text" Margin="4,0,25,0" Foreground="{StaticResource SolidBaseBrush}"
            VerticalAlignment="Center"/>
        <Button x:Name="button" Style="{StaticResource CloseButtonStyle}" 
            Foreground="{StaticResource SolidStrongBrush}" BorderBrush="{x:Null}" 
            Margin="0,0,4,0" VerticalAlignment="Center" HorizontalAlignment="Right" 
            Width="15" Height="15" BorderThickness="0" Opacity="0"/>
    </Grid>
</DataTemplate>


<Style x:Key="CloseButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
        <Grid Width="{TemplateBinding Height}" Height="{TemplateBinding Height}">
            <Ellipse Stroke="{StaticResource SolidBaseBrush}" Opacity="0"/>
              </Grid>
          </ControlTemplate>
       </Setter.Value>
    </Setter>
</Style>

ListBox 本身没什么可看的,但它是这样的:

<ListBox Grid.Row="1" x:Name="list_tabs"
    ItemsSource="{Binding Thumbnails}" 
    SelectedItem="{Binding SelectedThumbnail, Mode=TwoWay}" 
    ItemTemplate="{StaticResource TabListItemTemplate}" BorderBrush="{x:Null}" 
    Padding="0" BorderThickness="0" 
    Background="{StaticResource LinearStrong10}">
<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <toolkit:WrapPanel Orientation="Horizontal" ItemHeight="30"/>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

似乎项目的内容有多长并不重要,它仍然是 100px 宽。我想改变,所以该项目将遵循其内容的宽度。我忘记设置什么了?

I would like to create a UI similar to Visual Studio-s open documents stripe. The main idea is, that I have a listbox, which I fill with the open documents' thumbnails. I have the following Templates applied:

<DataTemplate x:Key="ListBoxItemTemplate">
    <Grid x:Name="grid" Height="23" d:DesignWidth="100">
        <Rectangle x:Name="background" Grid.ColumnSpan="3" 
            Stretch="Fill" Fill="{StaticResource LinearMain02}" Margin="0"/>
      <TextBlock Text="text" Margin="4,0,25,0" Foreground="{StaticResource SolidBaseBrush}"
            VerticalAlignment="Center"/>
        <Button x:Name="button" Style="{StaticResource CloseButtonStyle}" 
            Foreground="{StaticResource SolidStrongBrush}" BorderBrush="{x:Null}" 
            Margin="0,0,4,0" VerticalAlignment="Center" HorizontalAlignment="Right" 
            Width="15" Height="15" BorderThickness="0" Opacity="0"/>
    </Grid>
</DataTemplate>


<Style x:Key="CloseButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
        <Grid Width="{TemplateBinding Height}" Height="{TemplateBinding Height}">
            <Ellipse Stroke="{StaticResource SolidBaseBrush}" Opacity="0"/>
              </Grid>
          </ControlTemplate>
       </Setter.Value>
    </Setter>
</Style>

The ListBox itself is not much to look at, but here it is:

<ListBox Grid.Row="1" x:Name="list_tabs"
    ItemsSource="{Binding Thumbnails}" 
    SelectedItem="{Binding SelectedThumbnail, Mode=TwoWay}" 
    ItemTemplate="{StaticResource TabListItemTemplate}" BorderBrush="{x:Null}" 
    Padding="0" BorderThickness="0" 
    Background="{StaticResource LinearStrong10}">
<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <toolkit:WrapPanel Orientation="Horizontal" ItemHeight="30"/>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

It seems like it doesn't matter how long the content of the item is, it remains 100px wide. That I want to change, so the item would follow the width of its contents. What did I forget to set?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文