根據內容大小設置文本塊邊距

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 EG一起使用，可以進一步簡化此操作

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