WPF需要帮助，以帮助您了解如何变成模板自定义控件

问题描述

我正在尝试为正在处理的项目设计自定义控件的布局，并使它看起来像我想要的样子，问题是从功能的角度来看，我认为这不是去为我真正需要做的工作。以下内容可以放入Window以获得我想要的外观。

    <Window x:Class="TestProject.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestProject"
        mc:Ignorable="d"
        Title="MainWindow" Height="1080" Width="1920">
    <StackPanel Margin="15,80,1535.333,85.667">
        <Border BorderBrush="#FFD9D9D9" BorderThickness="0,1.5,0">
            <Grid>
                <Grid.ColumnDeFinitions>
                    <ColumnDeFinition Width="35" />
                    <ColumnDeFinition />
                    <ColumnDeFinition Width="Auto" />
                </Grid.ColumnDeFinitions>
                <Grid.RowDeFinitions>
                    <RowDeFinition />
                    <RowDeFinition />
                </Grid.RowDeFinitions>

                <StackPanel Grid.Row="0" Grid.ColumnSpan="3" Background="#FFF1F1F1">
                </StackPanel>

                <StackPanel Grid.Column="1" Margin="0,1,20,3" VerticalAlignment="Center">
                    <TextBlock FontSize="18" FontWeight="SemiBold">Header</TextBlock>
                </StackPanel>
                <StackPanel Grid.Column="2" Margin="0,10,3" VerticalAlignment="Center">
                    <TextBlock HorizontalAlignment="Right" FontWeight="SemiBold" FontSize="18">$125,400.00</TextBlock>
                </StackPanel>

                
                <StackPanel Grid.Column="1" Grid.Row="1" Margin="0,2,2">
                    <TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 1</TextBlock>
                    <TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 2</TextBlock>
                    <TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 3</TextBlock>
                    <TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 4</TextBlock>
                    <TextBlock Foreground="#FF383838" FontSize="18" Margin="0,2">Test 5</TextBlock>
                </StackPanel>

                <StackPanel Grid.Column="2" Grid.Row="1" Margin="0,2">
                    <TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$0.00</TextBlock>
                    <TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-100.00</TextBlock>
                    <TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$125,000.00</TextBlock>
                    <TextBlock HorizontalAlignment="Right" Foreground="#FF383838" FontSize="18" Margin="0,2">$1,000.00</TextBlock>
                    <TextBlock HorizontalAlignment="Right" Foreground="#FFBB0808" FontSize="18" Margin="0,2">$-500.00</TextBlock>
                </StackPanel>

            </Grid>
        </Border>
    </StackPanel>

</Window>

现在，我正在努力解决的问题是将其变成一个可以与绑定一起使用的模板，并且我认为我应该为列标题使用listview和Grid View。因此，这里也有任何建议。

上面有几件事我可以看作一个问题，主要是我需要单击每个项目行，然后再运行一些代码，这就是为什么我觉得应该使用Grid View选项代替。但是我之所以没有使用Grid View的一个原因，主要是因为我看不到在此处使用列进行相同布局的方法。

所以回顾一下

我应该使用网格视图吗，如果可以的话，如何通过中间列的缩放获得相同的结果？
学习将其转变为我可以设置样式的自定义控件的最佳方法。主要是寻找解释，需要学习的资源。

编辑：

对于那些关注或感兴趣的人，我正在努力的部分是以下部分。我该如何从数据绑定中做到这一点，并使模板受到控制，使其看起来像这样？我了解绑定部分，它是控制数据的实际模板，如以下代码所示。

                <StackPanel Grid.Column="1" Grid.Row="1" Margin="0,2">$-500.00</TextBlock>
                </StackPanel>

解决方法

使用自定义控件的原因是因为您要完全重新为其主题设置模板。它们比用户控件或模板要复杂得多，如果您不需要主题功能，则可以使用用户控件或模板。

它看起来确实像列表视图可以满足您的需求。

您需要一个行视图模型，该模型将画笔暴露出来以将第二列的前景绑定到该视图。

那一栏看起来像：

ForeBrush是公开的纯色画笔。

画笔可以说是视图的责任，因此您可以使用枚举或类似的枚举。还有一个转换器，可以将其转换为画笔。

然后可以将整个标记转换为数据模板，并将数据转换为视图模型。使用该视图模型的类型通过与您的视图模型匹配的数据类型将其模板化到ui中。

 <DataTemplate DataType="{x:Type local:CostingsListViewModel}"
     <ListView>
      .....

或者您可以将其放在UserControl中

  <DataTemplate DataType="{x:Type local:CostingsListViewModel}"
      <local:CostingsListView/>

custom-controls uwp wpf wpf xaml