XAML 根據矩形的大小更改 TextBlock Margin 屬性

Question

我正在嘗試創建看起來像這樣的東西：

它被設計為用於 VMIX 軟件和視頻廣播的 XAML 標題。

我將從 GSheet 中獲取大量數據，在 VMIX 中處理，並將這些數據分配給我的 TextBlock，例如“候選人”、“城市”和投票百分比。

從那個百分比我希望條形尺寸增加/減少，我設法做到了其中的一部分。

但主要問題是讓 % TextBlock 邊距適合矩形的右側。 任何人都知道我怎么能做到這一點？

我從來沒有用 C# 編碼，我有 C、C++ 和 JS 的背景，所以我花了一整天的時間尋找這個目的，但沒能做到。

我看到了一些適合的綁定方法，但我無法使用它們。

此外，我正在為 Visual Studio 2017 開發 Blend，我不明白為什么按 F5 時我不能在上面運行一些簡單的代碼......這是另一個問題。

非常感謝你的幫助。

編輯 ：

到目前為止，我已經找到了一些新的東西，真正的 DIY 解決方案，但如果我找不到更好的解決方案，那就是我的 lsat 解決方案：

我將有 2 個 TextBlock 用於 1 個 ProgressBar（感謝 Chris）

<Grid Margin="0,0,-8,0">
    <TextBlock x:Name="Votes1" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="{Binding Text, ElementName=MarginVotes1}" FontSize="72" Width="853" Height="188"><Run Text="6"/><Run Text="00"/></TextBlock>
    <ProgressBar HorizontalAlignment="Left" Height="79" Margin="171,503,0,0" VerticalAlignment="Top" Width="{Binding Path=Text, ElementName=Votes1}" Background="#FFEA4545"/>
    <TextBlock x:Name="MarginVotes1" HorizontalAlignment="Left" Margin="171,587,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="72" Height="98" Width="550"><Run Text="8"/><Run Text="0"/><Run Text="0"/><Run Text=","/><Run Text="4"/><Run Text="9"/><Run Text="0"/><Run Text=",0,0"/> 
   </TextBlock>

所以這很好用，但我必須在我的“MarginVotes1”值（在 GoogleSheet 中）之前做好准備。

最好是直接在后面的代碼中做這樣的事情：

在 val 中將 Votes1.Text 轉換為 Int STORE

將 x 設置為 val + DefaultMargin

在 MarginX 中將 x 轉換為字符串 STORE

創建字符串 MarginVoteStr 作為 MarginX + ",500, 0, 0"

將 Votes1.Margin 設置為 MarginVoteStr

Answer 1

歡迎來到 WPF。 這是我整理的一些代碼，您應該非常接近您的需要。

XAML：

<ItemsControl Grid.IsSharedSizeScope="True" ItemsSource="{Binding Candidates}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Left">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition SharedSizeGroup="Candidate" Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <TextBlock Text="{Binding Name}"/>
                <Rectangle Grid.Column="1" Height="10" Margin="5, 0" Width="{Binding BarWidth}" Fill="{Binding BarColor}"/>
                <TextBlock Grid.Column="2" Text="{Binding Percentage, StringFormat=P}"/>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

C＃：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        Candidates = new List<Candidate> { new Candidate { Name = "Joe", Percentage = .50, BarColor = Brushes.Green},
                                            new Candidate { Name = "Bob", Percentage = .30, BarColor = Brushes.Yellow},
                                            new Candidate { Name = "Sarah", Percentage = .20, BarColor = Brushes.Gray}};
    }
               
    public List<Candidate> Candidates
    {
        get { return (List<Candidate>)GetValue(CandidatesProperty); }
        set { SetValue(CandidatesProperty, value); }
    }
    public static readonly DependencyProperty CandidatesProperty =
        DependencyProperty.Register("Candidates", typeof(List<Candidate>), typeof(MainWindow));
}

public class Candidate
{
    public string Name { get; set; }
    public double Percentage { get; set; }
    public Brush BarColor { get; set; }

    //This is just shorter syntax for a readonly property.
    //The multiplier (200) should be whatever length you want a full bar to be
    public double BarWidth => Percentage * 200;
}

您應該注意以下幾點：

ItemsControl 和 DataTemplate

每當您需要在 WPF 中顯示多個數據項時，尤其是在項數可變的情況下，您應該使用某種類型的ItemsControl 。

ItemsControl接受某種集合並使用DataTemplate顯示每個項目。 ItemsControl為其源集合中的每個項目創建其ItemTemplate的新實例。 數據和視覺對象之間的鏈接是通過數據綁定建立的。

布局

<DataTemplate>標記之間的所有內容都是單個項目的視覺布局。

請注意，我沒有使用Margin創建所需的布局。 我沒有以這種方式使用Margin ，而是使用了 WPF 的許多Panel控件之一： Grid 。 使用Grid您可以像表格一樣定義行和列。

我的示例中的每個項目都是一個 1 行 3 列的Grid 。 構成項目的元素使用Grid.Column屬性放置在該網格中。 每列都有Width="Auto" ，這意味着它將增長以適應內部內容的寬度。 IsSharedSizeScope和SharedSizeGroup使每個單獨項目的Grid都具有第一列的相同寬度。

Candidate班

這是將用於存儲和表示正在顯示的數據的類。 請注意，屬性名稱與DataTemplate中的{Binding ______}值匹配。

我的示例主窗口有一組Candidate對象存儲在一個依賴屬性中。 此屬性綁定到ItemsControl的ItemsSource 。

總體

這個想法是用你需要的任何數據項填充你的集合，讓ItemsControl處理其余的事情，從而使項目的數據和視覺效果保持相對獨立。 即使是小的視覺方面，如正確格式化百分比值以供顯示，也可以使用DataTemplate來完成，而不是在 C# 中編寫代碼，如使用StringFormat=P所示。