2

ボタンクリックに基づいてGroupBox（コンボ、スライダー、トグルボタンを含む）を動的に作成する必要があるWPFアプリに取り組んでいます。ビューフォルダに2つのxamlファイルがあります。「CodecView.xaml」および「CodecWidgetView.xaml」。

CodecView.XAML：

    <Grid>
        <ScrollViewer Name="GroupBoxScroll" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" >
            <Grid Name="NumberofCodecs" Style="{DynamicResource styleBackground}" />                  
        </ScrollViewer>            
    </Grid>

    <Button Content="Add Box" Name="AddBoxBtn" Command="{Binding AddGroupBoxCommand}" />

CodecWidgetView.xaml：

<GroupBox Header="{Binding GroupBoxHeader}" Height="Auto" HorizontalAlignment="Stretch" Margin="5,5,0,0" Name="groupBox1" VerticalAlignment="Stretch" Width="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>

            <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <ToggleButton Name="FrequencyBox" Content="Master" Grid.Column="1" Height="25" Width="50" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" />
                <ComboBox Grid.Column="2" Height="23" HorizontalAlignment="Center" Margin="0,0,0,0" Name="comboBox2" VerticalAlignment="Center" Width="80" />
                <ComboBox Grid.Column="0" Height="23" HorizontalAlignment="Center" Margin="0,0,0,0" Name="comboBox1" VerticalAlignment="Center" Width="80" />
            </Grid>
            s
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <ToggleButton Name="OneSixBit" Content="16 Bit" Grid.Column="0" Height="25" Width="45" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" />
                <ToggleButton Name="ThreeTwoBit" Content="32 Bit" Grid.Column="3" Height="25" Width="45" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" />
                <ToggleButton Name="TwentyBit" Content="20 Bit" Grid.Column="1" Height="25" Width="45" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" />
                <ToggleButton Name="TwentyFourBit" Content="24 Bit" Grid.Column="2" Height="25" Width="45" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" />
            </Grid>

            <Grid Grid.Row="2">
                <Label Name="BitDelay" Content="Bit Delay" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,205,0" Height="25" Width="55" />
                <Slider Height="23" HorizontalAlignment="Center" Minimum="0.0" Maximum="255.0" TickFrequency="1.0" Margin="95,0,0,0" Name="bitdelayslider" VerticalAlignment="Center" Width="160" />
                <TextBox Name="BitDelayValue" IsReadOnly="True" Text="{Binding ElementName=bitdelayslider,Path=Value}" Width="40" Height="20" Margin="0,0,110,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Grid>

            <Grid Grid.Row="3">
                <Label Name="DBGain" Content="DB Gain" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,205,0" Height="25" Width="55" />
                <TextBox Name="DBGainValue" IsReadOnly="True" Text="{Binding ElementName=dbgainslider,Path=Value}" Width="40" Height="20" Margin="0,0,110,0" HorizontalAlignment="Center" VerticalAlignment="Center" />
                <Slider Height="23" HorizontalAlignment="Center" Minimum="0.0" Maximum="59.5" TickFrequency="0.5" Margin="95,0,0,0" Name="dbgainslider" VerticalAlignment="Center" Width="160" />
            </Grid>
        </Grid>
    </GroupBox>

CodecViewModel：CodecView.xamlのビューモデルです

    /// <summary>
    /// Event for Refresh Button
    /// </summary>
    private ICommand mAddGroupBoxCommand;
    public ICommand AddGroupBoxCommand
    {
        get
        {
            if (mAddGroupBoxCommand == null)
                mAddGroupBoxCommand = new DelegateCommand(new Action(mAddGroupBoxCommandExecuted), new Func<bool>(mAddGroupBoxCommandCanExecute));

            return mAddGroupBoxCommand;
        }
        set
        {
            mAddGroupBoxCommand = value;
        }
    }

    public bool mAddGroupBoxCommandCanExecute()
    {
        return true;
    }

    public void mAddGroupBoxCommandExecuted()
    {
        //Here It should display the groupbox 4 times
    }

ModelClass：

private string GroupBoxHeaderName;
    public string GroupBoxHeader
    {
        get
        {
            return GroupBoxHeaderName;
        }

        set
        {
            GroupBoxHeaderName = value;
            OnPropertyChanged("GroupBoxHeader");
        }
    }

したがって、起動時CodecWidgetView.xamlにグリッド(NumberofCodecs)に存在するこのGroupboxを追加したいと思います。CodecView.xamlそして、クリックするAddBoxButtonと、グループボックスが4回動的に生成され、表示されます:)

これは注意が必要です。各グループボックスヘッダーは、動的に生成されるすべてのグループボックスで異なる名前を表示する必要があります。起動時に、2つのグループボックスがとですでに表示されているGroupbox Header = "Location 1"としGroupBox Header = "Location 2"ます。AddgroupBox buttonクリックすると、ヘッダーがとして4つのグループボックスが必要になりますGroupbox Header = "Location 3" Groupbox Header = "Location 4" Groupbox Header = "Location 5" Groupbox Header = "Location 6"。

出来ますか？:)

4

1 に答える 1

3

次のコードでは、「CodecView.xaml」でitemscontrolを使用しており、そのitemscontrolのItemTemplateは「CodecWidgetView.Xaml」であり、そのデータテンプレートに説明を追加しています。「CodecWidgetView」ビューのビューモデルとなる別のクラスCodecWidgetViewModel.csを作成しました。

「CodecViewModel」のコンストラクターで、「CodecWidgetViewModel」のインスタンスを作成し、「CodecView」のItemsControlのソースである監視可能なコレクションに追加しています。

したがって、この時点で2つのCodecWidgetViewsが生成されます。ボタンをクリックすると、さらに4つのインスタンスが追加されるため、4つのCodecWidgetViewsが生成されます。要件に応じて「mAddGroupBoxCommandExecuted」メソッドでコードを変更できます。

ボタンクリックで

CodecView.XAML

<UserControl>
    <UserControl.Resources>
            <DataTemplate x:Key="CWDataTemplate">
                <StackPanel>
                    <TextBlock Text="{Binding Description}"/>
                <local:CodecWidgetView/>
                    </StackPanel>
            </DataTemplate>
    </UserControl.Resources>
        <Grid>
            <Grid>
                <ScrollViewer Name="GroupBoxScroll" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" >
                    <Grid Name="NumberofCodecs" Style="{DynamicResource styleBackground}" >
                        <ItemsControl ItemTemplate="{StaticResource CWDataTemplate}" ItemsSource="{Binding CodecWidgets}"/>
                    </Grid>
                </ScrollViewer>
            </Grid>

            <Button Content="Add Box" Name="AddBoxBtn" Command="{Binding AddGroupBoxCommand}" Click="AddBoxBtn_Click" HorizontalAlignment="Right" VerticalAlignment="Bottom"  />
        </Grid>
</UserControl>

CodecViewModel.cs

このようなプロパティを作成します

  public ObservableCollection<CodecWidgetViewModel> CodecWidgets { get; set; }

そして、CodecViewModelコンストラクターに次のコードを追加します

 CodecWidgets = new ObservableCollection<CodecWidgetViewModel>();
            CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 1"});
            CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 2" });

ウィジェットを追加するには

public void mAddGroupBoxCommandExecuted()
    {
         CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 3" });
            CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 4" });
            CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 5" });
            CodecWidgets.Add(new CodecWidgetViewModel { Description = "Location 6" });
    }

次のクラス CodecWidgetViewModel.csを作成します

public class CodecWidgetViewModel 
    {
        private string _description;
        public string Description {

            get { return _description; }
            set {
                _description = value;                   
            }
        }
    }
于 2012-10-17T10:21:18.833 に答える