Установка поля текстового блока в зависимости от размера контента - PullRequest
Новая
       8

Установка поля текстового блока в зависимости от размера контента

0 голосов
/ 18 февраля 2019

Я пытаюсь показать общий прогресс текущей воспроизводимой песни в формате ниже.

чч: мм: сс / чч: мм: сс ---> текущее время в чч: мм: сс / всеговремя в чч: мм: сс 

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

Все работает нормально, если общее и текущее время воспроизведения менее чем за час, но когда оно пересекает более часа, чем «Слеш», накладываются на общее время.Если я даю дополнительную маржу, то контент с менее чем часом времени выглядит плохо.

Как я могу дать маржу на основе длины контента или есть лучшее решение для решения этой проблемы.

Спасибо

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019

Вам просто нужно немного настроить свой макет.Зависит от того, как вы хотите, чтобы он выглядел точно, хотите, чтобы он перекрывался или находился сбоку от ползунка?

Что-то вроде этого будет сначала устанавливать таймеры, а затем индикатор выполнения, но вы должны иметь возможность настроитькак вы хотите.

<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>
0 голосов
/ 19 февраля 2019

Возможно, вам понадобится конвертер значений, чтобы получить маржу именно так, как вы хотите. 

<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>
0 голосов
/ 18 февраля 2019

Вы можете сделать это в коде позади. 

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>

...