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

您可以在后面的代码中完成此操作。

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>

Answer 2

您只需要稍微调整一下布局即可。取决于您希望它的外观如何，是否要覆盖它或位于滑块的侧面？

类似的事情将首先放置计时器，然后放置进度条，但是您应该可以调整自己的意愿。

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

您可能需要一个价值转换器才能准确地获得所需的保证金。

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

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

3 个答案: