根据内容大小设置文本块边距

Question

我正在尝试以以下格式显示当前播放歌曲的整体进度。

hh:mm:ss / hh:mm:ss ---> 当前时间 hh:mm:ss / 总时间 hh:mm:ss

<Border Margin="30,0,20,0" Name="NowPlayingScurbberPanel" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.Below="NowPlayingButtonPanel" RelativePanel.AlignBottomWithPanel="True">
                                    <StackPanel Visibility="{Binding Path=ShouldProgressBarBeVisible, Converter={StaticResource BoolToVisibilityConverter}}" MinHeight="40">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <TextBlock x:Uid="NowPlayingCurrentMediaTimeText" Margin="0,0,80,30" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text="{Binding Path=DisplayedMediaTimeCurrent}" HorizontalAlignment="Right" />
                                            <TextBlock x:Uid="slash" Margin="0,0,60,30" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text=" / " HorizontalAlignment="Right"  />
                                            <Slider x:Uid="NowPlayingScrubber" Margin="0,20,0,0" Style="{StaticResource NowPlayingMediaScrubberStyle}" Grid.Column="1" x:Name="NowPlayingScrubber" Value="{Binding Path=ProgressBarPercentage, Mode=TwoWay}" DragStarting="OnScrubberDragStarted" DropCompleted="OnScrubberDragCompleted" ValueChanged="OnScrubberDragDelta" IsEnabled="{Binding Path=ScrubberEnabled}"  />
                                            <TextBlock x:Uid="NowPlayingTotalMediaTimeText" Margin="60,0,0,30" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text="{Binding Path=DisplayedMediaTimeTotal}" HorizontalAlignment="Right"  />
                                        </Grid>
                                    </StackPanel>
                                </Border>

如果总播放时间和当前播放时间不到一小时，但超过一小时而不是“斜线”与总时间重叠，则一切正常。如果我提供额外的保证金，那么时间少于一小时的内容看起来很糟糕。

我如何根据内容长度给出边距，或者有没有更好的解决方案来解决这个问题。

谢谢

Answer 1

您只需稍微调整布局即可。取决于您希望它看起来如何，您希望它覆盖还是位于滑块的一侧？

这样的东西会把计时器放在第一位，然后是进度条，但你应该能够根据自己的意愿进行调整。

<Border Margin="30,0,20,0" Name="NowPlayingScurbberPanel" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.Below="NowPlayingButtonPanel" RelativePanel.AlignBottomWithPanel="True">
    <StackPanel Visibility="{Binding Path=ShouldProgressBarBeVisible, Converter={StaticResource BoolToVisibilityConverter}}" MinHeight="40">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock x:Uid="NowPlayingCurrentMediaTimeText" Margin="5" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text="{Binding Path=DisplayedMediaTimeCurrent}" HorizontalAlignment="Right" Grid.Column="0" />
            <TextBlock x:Uid="slash" Margin="5" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text=" / " HorizontalAlignment="Right" Grid.Column="1" />
            <TextBlock x:Uid="NowPlayingTotalMediaTimeText" Margin="5" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" Text="{Binding Path=DisplayedMediaTimeTotal}" HorizontalAlignment="Right" Grid.Column="2" />
            <Slider x:Uid="NowPlayingScrubber" Margin="5" Style="{StaticResource NowPlayingMediaScrubberStyle}" x:Name="NowPlayingScrubber" Value="{Binding Path=ProgressBarPercentage, Mode=TwoWay}" DragStarting="OnScrubberDragStarted" DropCompleted="OnScrubberDragCompleted" ValueChanged="OnScrubberDragDelta" IsEnabled="{Binding Path=ScrubberEnabled}" Grid.Column="3" />
        </Grid>
    </StackPanel>
</Border>

这可以通过使用单个 TextBlock 和 Run E.G. 来进一步简化

<TextBlock x:Uid="NowPlayingCurrentMediaTimeText" Margin="5" Style="{StaticResource NowPlayingMediaTimeStyle}" Grid.Row="0" HorizontalAlignment="Right" Grid.Column="0" > 
            <Run Text="{Binding Path=DisplayedMediaTimeCurrent}"/> 
            <Run Text=" \ "/> 
            <Run Text="{Binding Path=DisplayedMediaTimeTotal}"/>
 </TextBlock>

Answer 2

你可能需要一个值转换器来获得你想要的边距。

<StackPanel Orientation="Horizontal">
    <TextBox x:Name="aTextBox" Width="100" Height="30" />
    <TextBlock x:Name="aTextBlock" Width="100" Height="30" Text="some text" 
               Margin="{Binding ElementName=aTextBox, Path=Text.Length, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>

Answer 3

你可以在后面的代码中做到这一点。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void aTextBox_TextChanged(object sender, TextChangedEventArgs e)
    {
        aTextBlock.Margin = new Thickness(10 + aTextBox.Text.Length * 2, 0, 0, 0);
        aTextBlock.Text = aTextBox.Text;
        aTextBox.Width = 100 + aTextBox.Text.Length * 2;
        aTextBlock.Width = 100 + aTextBox.Text.Length * 2;
    }
}

<StackPanel Orientation="Horizontal"> <TextBox x:Name="aTextBox" Width="100" Height="30" TextChanged="aTextBox_TextChanged" /> <TextBlock x:Name="aTextBlock" Width="100" Height="30" Text="some text" /> </StackPanel>