Chapter.Net.WPF.Controls 2.0.0

<img src="https://raw.githubusercontent.com/dwndland/Chapter.Net.WPF.Controls/master/Icon.png" alt="logo" width="64"/>

Chapter.Net.WPF.Controls Library

Overview

A set of new WPF controls which are not yet build in.

Features

• ChapterTextBox: Enhances the WPF TextBox by the possibilities to show background text, drop files and folders and place additional controls in.
• ChapterArcPanel: Arranges child elements in an arc form.
• ChapterBrowseTextBox: Adds a browse button to the ChapterTextBox.
• ChapterTabControl: Enhances the TabControl with buttons for add new tab item and close buttons of existing tab items.
• ChapterEllipsePanel: Arranges child elements in a configurable ellipse form.
• ChapterComboBox: Represents a ComboBox which takes an enumeration value and shows all possible states inside the dropdown menu for let choosing a value.
• ChapterTreeView: Enhances ChapterTreeView multi select, select an item by right click on it and a two way bindable SelectedItem.
• ChapterTextBlock: Formats the given translation.
• ChapterHeaderedContentControl: Provides the possibility to automatically align Headers and contents.
• ChapterButton: Enhances the WPF Button to show an disabled image. The bound image will be shown monochrome if the button is disabled.
• ItemsPanel: A UniformGrid with only one row or one column, depending on the orientation, which adds a spacing between the items.
• ChapterNumberBox: Displays a TextBox to accept numeric values only, so the text can be bound to a numeric property directly without converting.
• ChapterToggleSwitch: A custom checkbox where a slider shows the checked and unchecked state.
• ChapterPasswordBox: Hosts and enhances the WPF ChapterPasswordBox to be able to bind the password value and show info text in the background.
• ChapterResizer: Brings the possibility to resize every UI control manually by hold and drag the corners or sides.
• ChapterSearchTextBox: Adds search and cancel buttons to the ChapterTextBox to represent a search box shown like in the Windows explorer.
• ChapterStackPanel: A StackPanel which adds a spacing between the items.
• ChapterSplitButton: A button with a drop down where more commands can be available.
• ChapterTimeBox: Shows textboxes to let the user input a time.
• ChapterTitledItemsControl: Provides the possibility to automatically align titles and contents.
• ChapterTreeListView: Shows a TreeView with the possibility to expand or collapse child elements shown in a GridView. The expander can be placed in every column cell template.
• ChapterUniformPanel: A UniformGrid with only one row or one column, depending on the orientation, which adds a spacing between the items.
• ChapterWrapPanel: Enhances the WrapPanel by the feature that all items will have the same size.

Getting Started

1. Installation:

   • Install the Chapter.Net.WPF.Controls library via NuGet Package Manager:

   dotnet add package Chapter.Net.WPF.Controls
   

2. ChapterTextBox:

   • Usage

   <chapter:ChapterTextBox InfoText="Required"
                           AllowedDropType="Files"
                           Separator=";"
                           WhitespaceHandling="Trim"
                           InputLimiter="{controls:AlphaInputLimiter}"
                           TextModificator="{controls:ToUpperModificator OnLostFocus}" />
   

   

3. ChapterArcPanel:

   • Usage

   <ItemsControl ItemsSource="{Binding Cards}">
       <ItemsControl.ItemsPanel>
           <ItemsPanelTemplate>
               <chapter:ChapterArcPanel Width="210" Height="100" />
           </ItemsPanelTemplate>
       </ItemsControl.ItemsPanel>
   </ItemsControl>
   
   <chapter:ChapterArcPanel Width="300" Height="100">
       <Button Content="One" />
       <Button Content="Two" />
       <Button Content="Three" />
       <Button Content="Four" />
   </chapter:ChapterArcPanel>
   

   

4. ChapterBrowseTextBox:

   • Usage

   <chapter:ChapterBrowseTextBox ShowBrowseButton="True"
                                 BrowseCommand="{Binding BrowseCommand}" />
   

   

5. ChapterTabControl:

   • Usage

   <chapter:ChapterTabControl ShowAddButton="True"
                              TabItemAddingCommand="{Binding AddItemCommand}"
                              TabItemClosingCommand="{Binding RemoveItemCommand}" />
   

   

6. ChapterEllipsePanel:

   • Usage

   <ItemsControl ItemsSource="{Binding Player}">
       <ItemsControl.ItemsPanel>
           <ItemsPanelTemplate>
               <chapter:ChapterEllipsePanel ElementStartPosition="Bottom"
                                            EllipseRotateDirection="Clockwise"
                                            ElementsRotateDirection="Outroversive"
                                            RotateElements="True" />
           </ItemsPanelTemplate>
       </ItemsControl.ItemsPanel>
   </ItemsControl>
   
   <chapter:ChapterEllipsePanel>
       <Button Content="One" />
       <Button Content="Two" />
       <Button Content="Three" />
       <Button Content="Four" />
   </chapter:ChapterEllipsePanel>
   

   

7. ChapterComboBox:

   • Usage

   public enum Number
   {
       [Description("The Number One")]
       One,
   
       [Description("The Number Two")]
       Two,
   
       [Description("The Number Three")]
       Three
   }
   
   public class MainViewModel : ObservableObject
   {
       public MainViewModel()
       {
           Number = Number.One;
       }
   
       public Number Number
       {
           get { return _number; }
           set
           {
               _number = value;
               NotifyPropertyChanged("Number");
           }
       }
       private Number _number;
   }
   

   
   
   
   <chapter:ChapterComboBox EnumType="{x:Type Demo:Number}" SelectedItem="{Binding Number}">
       <chapter:ChapterComboBox.ItemTemplate>
           <DataTemplate>
               <StackPanel Orientation="Horizontal">
                   <TextBlock Text="Name: " />
                   <TextBlock Text="{Binding }" />
                   <TextBlock Text="; Description: " />
                   <TextBlock Text="{Binding Converter={StaticResource EnumDescriptionConverter}}" />
               </StackPanel>
           </DataTemplate>
       </chapter:ChapterComboBox.ItemTemplate>
   </chapter:ChapterComboBox>
   
   
   <chapter:ChapterComboBox EnumType="{x:Type Demo:Number}" SelectedItem="{Binding Number}" DisplayKind="Description" />
   
   
   <chapter:ChapterComboBox EnumType="{x:Type Demo:Number}" SelectedItem="{Binding Number}" DisplayKind="ToString" />
   
   
   <chapter:ChapterComboBox EnumType="{x:Type Demo:Number}" SelectedItem="{Binding Number}" DisplayKind="Converter" ItemConverter="{StaticResource EnumToStringConverter}" />
   

   

8. ChapterTreeView:

   • Usage

   <chapter:ChapterTreeView ItemsSource="{Binding Folders}"
                            SelectedElement="{Binding SelectedItem, Mode=TwoWay}"
                            AutoExpandSelected="True">
       <chapter:ChapterTreeView.ItemTemplate>
           <HierarchicalDataTemplate ItemsSource="{Binding Folders}">
               <TextBlock Text="{Binding Name}" />
           </HierarchicalDataTemplate>
       </chapter:ChapterTreeView.ItemTemplate>
   </chapter:ChapterTreeView>
   

   

9. ChapterTextBlock:

   • Usage

   <ListBox ItemsSource="{Binding Patients}">
       <ListBox.ItemTemplate>
           <DataTemplate>
               <chapter:ChapterTextBlock Formatter="{DynamicResource NameFormatter}">
                   <chapter:FormatterPair Replace="{}{firstName}" With="{Binding FirstName}" />
                   <chapter:FormatterPair Replace="{}{lastName}" With="{Binding LastName}" />
               </chapter:ChapterTextBlock>
           </DataTemplate>
       </ListBox.ItemTemplate>
   </ListBox>
   

   

10. ChapterHeaderedContentControl:

    • Usage

    <chapter:ChapterHeaderedContentControl>
        <chapter:HeaderItem Header="Name">
            <TextBox Text="{Binding Name}" />
        </chapter:HeaderItem>
        <chapter:HeaderItem Header="Family Name">
            <TextBox Text="{Binding FamilyName}" />
        </chapter:HeaderItem>
        <chapter:HeaderItem Header="Age">
            <TextBox Text="{Binding Age}" />
        </chapter:HeaderItem>
    </chapter:HeaderdItemsControl>
    

    

11. ChapterButton:

    • Usage

    <UniformGrid Rows="1" DockPanel.Dock="Bottom" HorizontalAlignment="Center">
    
        <chapter:ChapterButton Content="Back"
                               ImageSource="/MyAssembly;component/Data/Previous.png" />
    
        <chapter:ChapterButton Content="Next"
                               ImageSource="/MyAssembly.Demo;component/Data/Next.png" 
                               ImagePosition="Right"
                               ImageMargin="4,0,0,0" />
    
        <chapter:ChapterButton Content="Finish"
                               IsEnabled="False"
                               ImageSource="/MyAssembly;component/Data/OK.png" />
    
        <chapter:ChapterButton Content="Cancel"
                               ImageSource="/MyAssembly;component/Data/Cancel.png" />
    
    </UniformGrid>
    

    

12. ItemsPanel:

    • Usage

    <Window>
        <DockPanel>
            <controls:ItemsPanel DockPanel.Dock="Bottom"
                                 IsUniform="True"
                                 HorizontalAlignment="Right"
                                 Orientation="Horizontal"
                                 Spacing="10">
                <Button Content="Back" />
                <Button Content="Next" />
                <Button Content="Finish" />
                <Button Content="Cancel" />
            </controls:ItemsPanel>
    
            <Grid />
        </DockPanel>
    </Window>
    
    <Window>
        <DockPanel>
            <controls:ItemsPanel DockPanel.Dock="Bottom"
                                 IsUniform="False"
                                 HorizontalAlignment="Right"
                                 Orientation="Horizontal"
                                 Spacing="10">
                <Button Content="Back" />
                <Button Content="Next" />
                <Button Content="Finish" />
                <Button Content="Cancel" />
            </controls:ItemsPanel>
    
            <controls:ItemsPanel Spacings="10">
                <TextBox />
                <TextBox />
            </controls:ItemsPanel>
        </DockPanel>
    </Window>
    

    

13. ChapterNumberBox:

    • Usage

    
    <chapter:ChapterNumberBox NumberType="Double"
    
                              Number="{Binding MyDoubleValue}"
                              Minimum="-12.5"
                              Maximum="55.5"
                              DefaultNumber="5"
    
                              ShowCurrency="True"
                              Currency="�"
                              CurrencyPosition="Right"
    
                              HasCheckBox="True"
                              CheckBoxBehavior="EnableIfChecked"
                              IsChecked="{Binding MyDoubleValueIsChecked}"
                              CheckBoxPosition="Left"
    
                              UpDownBehavior="ArrowsAndButtons"
                              Step="0.5"
                              UpDownButtonsPosition="Right"
    
                              NumberSelectionBehavior="OnFocusAndUpDown"
    
                              LostFocusBehavior="{Toolkit:LostFocusBehavior PlaceDefaultNumber, TrimLeadingZero=True, FormatText={}{0:D2}}"
    
                              PredefinesCulture="en-US" />
    

    

14. ChapterToggleSwitch:

    • Usage

    <chapter:ChapterToggleSwitch SliderShape="Round" BackShape="Round" IsChecked="{Binding IsOn}" />
    
    <chapter:ChapterToggleSwitch SliderShape="Square" BackShape="Square" SliderWidth="18" IsChecked="{Binding IsOn}" />
    
    <chapter:ChapterToggleSwitch SliderShape="Square" BackShape="Square" SliderWidth="18" BackMargin="10,6" HasText="False" IsChecked="{Binding IsOn}" />
    

    

15. ChapterPasswordBox:

    • Usage

    <chapter:ChapterPasswordBox Password="{Binding Password}" InfoText="Required" InfoAppearance="OnEmpty" />
    

    

16. ChapterResizer:

    • Usage

    <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
        <chapter:ChapterResizer FrameSizes="0,0,4,4" Margin="0,0,20,0" VerticalAlignment="Top" CornerSize="12">
            <Button Content="Button" Padding="12" />
        </chapter:ChapterResizer>
        <chapter:ChapterResizer RightWidth="4" Margin="0,0,20,0" VerticalAlignment="Top">
            <Button Content="Button" Padding="12" />
        </chapter:ChapterResizer>
        <chapter:ChapterResizer BottomHeight="4" VerticalAlignment="Top">
            <Button Content="Button" Padding="12" />
        </chapter:ChapterResizer>
    </StackPanel>
    

    

17. ChapterSearchTextBox:

    • Usage

    <chapter:ChapterSearchTextBox ShowSearchButton="True"
                                  SearchCommand="{Binding SearchCommand}"
                                  IsSearching="{Binding IsSearching}"
                                  CancelCommand="{Binding CancelSearchCommand}" />
    

    

18. ChapterStackPanel:

    • Usage

    <chapter:ChapterStackPanel DockPanel.Dock="Bottom"
                               HorizontalAlignment="Right"
                               Orientation="Horizontal"
                               Spacing="10">
        <Button Content="Back" />
        <Button Content="Next" />
        <Button Content="Finish" />
        <Button Content="Cancel" />
    </chapter:ChapterStackPanel>
    
    <chapter:ChapterStackPanel Spacings="10">
        <TextBox />
        <TextBox />
    </chapter:ChapterStackPanel>
    

    

19. ChapterSplitButton:

    • Usage

    <chapter:ChapterSplitButton Content="Any Button" Padding="12,4" Command="{Binding ChapterSplitButtonCommand}">
        <chapter:ChapterSplitButtonItem Content="Sub Item 1" Command="{Binding ChapterSplitButtonItemCommand}" CommmandParameter="1" />
        <chapter:ChapterSplitButtonItem Content="Sub Item 2" Command="{Binding ChapterSplitButtonItemCommand}" CommmandParameter="2" />
        <chapter:ChapterSplitButtonItem Content="Sub Item 3" Command="{Binding ChapterSplitButtonItemCommand}" CommmandParameter="3" />
    </chapter:ChapterSplitButton>
    
    <chapter:ChapterSplitButton Content="Any Button" Padding="12,4" ItemsSource="{Binding Items}" Command="{Binding ChapterSplitButtonCommand}">
        <chapter:ChapterSplitButton.ItemContainerStyle>
            <Style TargetType="{x:Type chapter:ChapterSplitButtonItem}">
                <Setter Property="Command" Value="{Binding DataContext.ChapterSplitButtonItemCommand, RelativeSource={RelativeSource AncestorType={x:Type buttons:ChapterSplitButton}}}" />
                 <Setter Property="CommandParameter" Value="{Binding Index}" />
                 <Setter Property="HorizontalContentAlignment" Value="Left" />
             </Style>
         </chapter:ChapterSplitButton.ItemContainerStyle>
         <chapter:ChapterSplitButton.ItemTemplate>
             <DataTemplate>
                 <TextBlock Text="{Binding }" />
             </DataTemplate>
         </chapter:ChapterSplitButton.ItemTemplate>
     </chapter:ChapterSplitButton>
    

    

20. ChapterTimeBox:

    • Usage

    <chapter:ChapterTimeBox HasUpDownButtons="True" TimeFormat="Long" Time="{Binding CurrentTime}" />
    

    

21. ChapterTitledItemsControl:

    • Usage

    <chapter:ChapterTitledItemsControl>
        <chapter:ChapterTitledItem Text="Name">
            <TextBox Text="{Binding Name}" />
        </chapter:ChapterTitledItem>
        <chapter:ChapterTitledItem Text="Family Name">
            <TextBox Text="{Binding FamilyName}" />
        </chapter:ChapterTitledItem>
        <chapter:ChapterTitledItem Text="Age">
            <TextBox Text="{Binding Age}" />
        </chapter:ChapterTitledItem>
    </chapter:ChapterTitledItemsControl>
    

    

22. ChapterTreeListView:

    • Usage

    <chapter:ChapterTreeListView ItemsSource="{Binding Customer}">
        <chapter:ChapterTreeListView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type Data:Customer}" ItemsSource="{Binding Customer}" />
        </chapter:ChapterTreeListView.Resources>
        <chapter:ChapterTreeListView.View>
            <GridView>
                <GridViewColumn Header="Name">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <DockPanel>
                                <chapter:ListViewExpander DockPanel.Dock="Left" />
                                <TextBlock Text="{Binding Name}" Margin="5,0,0,0" />
                            </DockPanel>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                <GridViewColumn Header="Family Name" DisplayMemberBinding="{Binding FamilyName}" />
            </GridView>
        </chapter:ChapterTreeListView.View>
    </chapter:ChapterTreeListView>
    

    

23. ChapterUniformPanel:

    • Usage

    <chapter:ChapterUniformPanel DockPanel.Dock="Bottom"
                                 HorizontalAlignment="Right"
                                 Orientation="Horizontal"
                                 Spacing="10">
        <Button Content="Back" />
        <Button Content="Next" />
        <Button Content="Finish" />
        <Button Content="Cancel" />
    </chapter:ChapterUniformPanel>
    

    

24. ChapterWrapPanel:

    • Usage

    <ItemsControl ItemsSource="{Binding Images}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <chapter:ChapterWrapPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
    
    <chapter:ChapterWrapPanel Orientation="Horizontal" MinItemWidth="100">
        <Button Content="One" />
        <Button Content="Two" />
        <Button Content="Three" />
    </chapter:ChapterWrapPanel>
    

    

(Note: The shown images are taken from the demo project and are not made by the code next to it.)

Links

• NuGet
• GitHub

License

Copyright (c) David Wendland. All rights reserved. Licensed under the MIT License. See LICENSE file in the project root for full license information.