WPF UserControl (dll) C# 的实例

Question

I am fresh in WPF so sorry if this will be a stupid question.

I make .dll library with usercontrol. This .dll is just a graph, currently with random values, but later I like load values.

My XAML code now:

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

My Code:

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

My dll usercontrol 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>

It shown listboxes but no nodes (points) inside. It show only empty listboxes. Why?

Answer 1

Just write <dr:UserControl1/> 6 times like shown below, don't forget to set the margins, the with the hegiht and whatever you need to position you control in the window or you are going to see only the last one you defined

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

Answer 2

You can create different instances of your UserControl. For Eg:

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

You can fill values to your objUC1 object.

Similarly, you can create instances from 2-6 and assign values.

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

.
.
.

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

Dont forget to divide your main grid into rows/columns or instead use a stackpanel

For MVVM pattern

<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

You mentioned you are using the MVVM pattern, so this would be my approach:

Create a main viewmodel for the form and set the datacontext of the form to this viewmodel. This viewmodel should contain properties for the 6 viewmodels that control the values of the 6 graphs(views).

Let's call those properties GraphViewModel1 etc.

In your view, which still has its datacontext set to the main viewmodel, we will use the path to those graphviewmodels 1-6 like this:

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

With this binding, each graph will have its own set of values.

If you change the properties of your graphviewmodels or some properties inside these viewmodels, don't forget that you will have to raise propertychanged events to have your UI notice those changes.