WPF UserControl (dll) C# 的實例

Question

我對 WPF 很陌生，如果這是一個愚蠢的問題，我很抱歉。

我用用戶控件制作 .dll 庫。 這個 .dll 只是一個圖形，目前具有隨機值，但后來我喜歡負載值。

我現在的 XAML 代碼：

<ScrollViewer>
<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <dr:UserControl1 Grid.Row="0" DataContext="{Binding UCData1}"/>
    <dr:UserControl1 Grid.Row="1" DataContext="{Binding UCData2}"/>
    <dr:UserControl1 Grid.Row="2" DataContext="{Binding UCData3}"/>
    <dr:UserControl1 Grid.Row="3" DataContext="{Binding UCData4}"/>
    <dr:UserControl1 Grid.Row="4" DataContext="{Binding UCData5}"/>
    <dr:UserControl1 Grid.Row="5" DataContext="{Binding UCData6}"/>

</Grid>
</ScrollViewer>

我的代碼：

public partial class MainWindow : Window
{

    public MainWindow()
    {

        //InitializeComponent();

        UserControl1 UCData1 = new UserControl1();
        UserControl1 UCData2 = new UserControl1();
        UserControl1 UCData3 = new UserControl1();
        UserControl1 UCData4 = new UserControl1();
        UserControl1 UCData5 = new UserControl1();
        UserControl1 UCData6 = new UserControl1();



    }

    public object UCData1 { get; set; }
    public object UCData2 { get; set; }
    public object UCData3 { get; set; }
    public object UCData4 { get; set; }
    public object UCData5 { get; set; }
    public object UCData6 { get; set; }
}

我的 dll 用戶控件 XAML：

<Grid>
    <Grid.Resources>
        <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>

        <CompositeCollection x:Key="Col">
            <CollectionContainer Collection="{Binding DataContext.Connectors, Source={x:Reference view}}"/>
            <CollectionContainer Collection="{Binding DataContext.Nodes, Source={x:Reference view}}"/>
        </CompositeCollection>

        <DataTemplate DataType="{x:Type local:Node}">

            <Canvas Name="dragTarget">
                <Thumb DragDelta="Thumb_Drag" DragStarted="Thumb_DragStarted" DragCompleted="Thumb_DragCompleted">
                    <Thumb.Template>
                        <ControlTemplate TargetType="Thumb">
                            <Canvas Margin="-10,-10,10,10">
                                <Ellipse Height="20" Width="20" Stroke="Black" StrokeThickness="1" Fill="Yellow"
                                         x:Name="Ellipse"/>
                                <TextBlock Canvas.Top="-20" Canvas.Left="-40" Width="100" 
                                           TextAlignment="Center" Text="{Binding Name}" FontWeight="Bold"
                                           IsHitTestVisible="False"
                                           Visibility="{Binding DataContext.ShowNames, 
                                                                RelativeSource={RelativeSource FindAncestor, AncestorType=Window},
                                                                Converter={StaticResource BoolToVisibilityConverter}}"/>

                                <TextBlock Canvas.Left="30" Canvas.Top="10"
                                           Text="{Binding X, StringFormat='{}X = {0}'}"
                                           IsHitTestVisible="False"
                                           Visibility="Collapsed" x:Name="XText"/>

                                <TextBlock Canvas.Left="30" Canvas.Top="25"
                                           Text="{Binding Y, StringFormat='{}Y = {0}'}"
                                           IsHitTestVisible="False"
                                           Visibility="Collapsed" x:Name="YText"/>
                            </Canvas>

                            <ControlTemplate.Triggers>

                                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True">
                                    <Setter TargetName="Ellipse" Property="Fill" Value="Red"/>
                                </DataTrigger>
                                <Trigger Property="IsDragging" Value="True">
                                    <Setter TargetName="Ellipse" Property="Fill" Value="Green"/>
                                </Trigger>
                                <DataTrigger Binding="{Binding DataContext.ShowAllCoordinates, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" Value="True">
                                    <Setter TargetName="XText" Property="Visibility" Value="Visible"/>
                                    <Setter TargetName="YText" Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding 
                                    }" Value="True">
                                    <Setter TargetName="Ellipse" Property="StrokeThickness" Value="2"/>
                                    <Setter TargetName="Ellipse" Property="Stroke" Value="Red"/>
                                    <Setter TargetName="Ellipse" Property="Fill" Value="White"/>
                                </DataTrigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True"/>
                                        <Condition Binding="{Binding DataContext.ShowCurrentCoordinates, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" Value="True"/>
                                    </MultiDataTrigger.Conditions>
                                    <Setter TargetName="XText" Property="Visibility" Value="Visible"/>
                                    <Setter TargetName="YText" Property="Visibility" Value="Visible"/>
                                </MultiDataTrigger>

                            </ControlTemplate.Triggers>

                        </ControlTemplate>
                    </Thumb.Template>
                </Thumb>
            </Canvas>

        </DataTemplate>

        <DataTemplate DataType="{x:Type local:Connector}">
            <Line Stroke="Blue" StrokeThickness="3"
                        X1="{Binding Start.X}" Y1="{Binding Start.Y}"
                        X2="{Binding End.X}" Y2="{Binding End.Y}" x:Name="Line"/>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding End}" Value="{x:Null}">
                    <Setter TargetName="Line" Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True">
                    <Setter TargetName="Line" Property="Stroke" Value="Red"/>
                    <Setter TargetName="Line" Property="StrokeDashArray" Value="2 3"/>
                    <DataTrigger.EnterActions>
                        <BeginStoryboard x:Name="DashAnimation">
                            <Storyboard Duration="00:00:01" RepeatBehavior="Forever">
                                <DoubleAnimation From="0" To="50" Storyboard.TargetName="Line" Storyboard.TargetProperty="StrokeDashOffset"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <StopStoryboard BeginStoryboardName="DashAnimation"/>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </DataTemplate.Triggers>

        </DataTemplate>

    </Grid.Resources>

    <Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Name="column1" Width="*"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Name="row1" Height="*"/>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Margin="2" x:Name="tbTitle" Grid.Column="1" Grid.Row="0" RenderTransformOrigin="0.5,0.5" FontSize="14" FontWeight="Bold" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextAlignment="Center" Text="XAL"/>
        <TextBlock Margin="2" x:Name="Time" Grid.Column="1" Grid.Row="2" RenderTransformOrigin="0.5,0.5" TextAlignment="Center" Text="Time" />
        <TextBlock Margin="2" x:Name="Color" Grid.Column="0" Grid.Row="1" RenderTransformOrigin="0.5,0.5" TextAlignment="Center" Text="Color">
            <TextBlock.LayoutTransform>
                <RotateTransform Angle="-90"/>
            </TextBlock.LayoutTransform>
        </TextBlock>

        <TextBlock Margin="2" x:Name="Brightness" Grid.Column="2" Grid.Row="1" RenderTransformOrigin="0.5,0.5" TextAlignment="Center" Text="Brightness">
            <TextBlock.LayoutTransform>
                <RotateTransform Angle="-90"/>
            </TextBlock.LayoutTransform>
        </TextBlock>

        <Label Name="lblTest" Grid.Column="1" Grid.Row="0"/>

        <ListBox SelectedItem="{Binding SelectedObject}" 
                 PreviewMouseMove="ListBox_PreviewMouseMove"
                 PreviewMouseDown="ListBox_PreviewMouseDown"
                 Margin="10,10,10,10"
                 Grid.Column="1"
                 Grid.Row="1" PreviewMouseRightButtonDown="ListBox_PreviewMouseRightButtonDown">
            <ListBox.Template>
                <ControlTemplate>
                    <Border>
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" Opacity=".3">
                                <GradientStop Color="Black" Offset="0"/>
                                <GradientStop Color="LightGray" Offset="1"/>
                            </LinearGradientBrush>
                        </Border.Background>

                        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                            <Border>
                                <!-- This Border serves as a background and the VisualBrush used to paint its background serves as the "Snapping Grid" -->
                                <!-- The "Snapping" Actually occurs in the Node class (see Node.X and Node.Y properties), it has nothing to do with any UI Elements -->
                                <Border.Background>
                                    <VisualBrush TileMode="Tile"
                                    Viewport="0,0,20,20" ViewportUnits="Absolute" 
                                    Viewbox="0,0,20,20" ViewboxUnits="Absolute">
                                        <VisualBrush.Visual>
                                            <Rectangle Stroke="Darkgray" StrokeThickness="1" Height="24" Width="24"
                                        StrokeDashArray="5 3"/>
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </Border.Background>
                                <ItemsPresenter/>
                            </Border>
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemsSource>
                <StaticResource ResourceKey="Col"/>
            </ListBox.ItemsSource>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas IsItemsHost="True" Background="#01FFFFFF" 
                            Height="{Binding AreaHeight}" Width="{Binding AreaWidth}"
                            VerticalAlignment="Top" HorizontalAlignment="Left"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Canvas.Left" Value="{Binding X}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                    <Setter Property="FocusVisualStyle" Value="{StaticResource EmptyFocusVisualStyle}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListBoxItem">
                                <ContentPresenter x:Name="Content"/>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Content" Property="Effect">
                                            <Setter.Value>
                                                <DropShadowEffect Color="Gray" ShadowDepth="4" BlurRadius="10"/>
                                            </Setter.Value>
                                        </Setter>
                                    </Trigger>
                                    <DataTrigger Binding="{Binding IsNew}" Value="True">
                                        <Setter Property="Opacity" Value=".5"/>
                                    </DataTrigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
        </ListBox>
    </Grid>

</Grid>

它顯示了列表框，但里面沒有節點（點）。 它只顯示空列表框。 為什么？

Answer 1

只需編寫<dr:UserControl1/> 6 次，如下所示，不要忘記設置邊距、高度以及您需要在窗口中放置控件的任何內容，否則您將只看到您定義的最后一個

<Grid>
    <dr:UserControl1/>
    <dr:UserControl1/>
    <dr:UserControl1/>
    <dr:UserControl1/>
    <dr:UserControl1/>
    <dr:UserControl1/>
</Grid>

Answer 2

您可以創建 UserControl 的不同實例。 例如：

UserControl1 objUC1 = new UserControl1;
//Adding usercontrol to maingrid from code behind.
MainGrid.Children.Add(objUC1);

您可以為 objUC1 對象填充值。

同樣，您可以從 2-6 中創建實例並分配值。

UserControl1 objUC2 = new UserControl1;
MainGrid.Children.Add(objUC2);

.
.
.

UserControl1 objUC6 = new UserControl1;
MainGrid.Children.Add(objUC6);

不要忘記將主網格划分為行/列或使用堆棧面板

對於 MVVM 模式

<Grid>
<dr:UserControl1 DataContext="{Binding UCData1}"/>
<dr:UserControl1 DataContext="{Binding UCData2}"/>
<dr:UserControl1 DataContext="{Binding UCData3}"/>
<dr:UserControl1 DataContext="{Binding UCData4}"/>
<dr:UserControl1 DataContext="{Binding UCData5}"/>
<dr:UserControl1 DataContext="{Binding UCData6}"/>
</Grid>

Answer 3

你提到你正在使用 MVVM 模式，所以這就是我的方法：

為表單創建一個主視圖模型，並將表單的數據上下文設置為此視圖模型。 此視圖模型應包含 6 個視圖模型的屬性，這些屬性控制 6 個圖（視圖）的值。

讓我們將這些屬性稱為 GraphViewModel1 等。

在您的視圖中，它的數據上下文仍然設置為主視圖模型，我們將使用這些圖形視圖模型 1-6 的路徑，如下所示：

<Grid>
   <dr:UserControl1 Datacontext="{Binding GraphViewModel1}"/>
   <dr:UserControl1 Datacontext="{Binding GraphViewModel2}"/>
   <dr:UserControl1 Datacontext="{Binding GraphViewModel3}"/>
   <dr:UserControl1 Datacontext="{Binding GraphViewModel4}"/>
   <dr:UserControl1 Datacontext="{Binding GraphViewModel5}"/>
   <dr:UserControl1 Datacontext="{Binding GraphViewModel6}"/>
</Grid>

有了這個綁定，每個圖都會有自己的一組值。

如果您更改了圖形視圖模型的屬性或這些視圖模型中的某些屬性，請不要忘記您必須引發 propertychanged 事件才能讓您的 UI 注意到這些更改。