Click here to Skip to main content
15,886,137 members
Articles / Desktop Programming / WPF

WPF RichText Editor with Slider Formatting and a Font Style Dialog

Rate me:
Please Sign up or sign in to vote.
4.75/5 (5 votes)
5 Jul 2009CPOL9 min read 63.3K   4.1K   42  
WPF RichText Editor with custom Slider Control formatting and a Font Style Dialog box
<Window x:Class="WpfAppRuler.FontStyleDlg"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:jas="clr-namespace:WPF.JoshSmith.ServiceProviders.UI" 
    Title="FontStyle" Height="480" Width="656" >

    <Window.Resources>
        <Style x:Key="ItemContStyle" TargetType="ListViewItem">
            <Style.Resources>
                <LinearGradientBrush x:Key="MouseOverBrush" StartPoint="0.5, 0" EndPoint="0.5, 1">
                    <GradientStop Color="#22000000" Offset="0" />
                    <GradientStop Color="#44000000" Offset="0.4" />
                    <GradientStop Color="#55000000" Offset="0.6" />
                    <GradientStop Color="#33000000" Offset="0.9" />
                    <GradientStop Color="#22000000" Offset="1" />
                </LinearGradientBrush>
            </Style.Resources>
            <Setter Property="Padding" Value="0,4" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <!-- The default control template for ListViewItem has a Border 
           which contains the item's content. -->
            <Setter Property="Border.BorderThickness" Value="0,0,0,0.5" />
            <Setter Property="Border.BorderBrush" Value="LightGray" />
            <!-- These triggers react to changes in the attached properties set
           during a managed drag-drop operation. -->
            <Style.Triggers>
                <Trigger Property="jas:ListViewItemDragState.IsBeingDragged" Value="True">
                    <Setter Property="FontWeight" Value="DemiBold" />
                </Trigger>
                <Trigger Property="jas:ListViewItemDragState.IsUnderDragCursor" Value="True">
                    <Setter Property="Background" Value="{StaticResource MouseOverBrush}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" MinHeight="175" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <GroupBox Header="Font Style Drag-n-Drop" Grid.Row="0" Grid.Column="0"  Margin="4" Padding="2">
            <StackPanel Height="135">
                <StackPanel.Resources>
                    <Style TargetType="CheckBox">
                        <Setter Property="HorizontalAlignment" Value="Left" />
                        <Setter Property="IsChecked" Value="True" />
                    </Style>
                </StackPanel.Resources>
                
                <StackPanel Margin="4" IsEnabled="{Binding ElementName=chkManageDragging, Path=IsChecked}">
                    <!-- Space reserved for Font Decorator Logic -->
                </StackPanel>
                <Line Stroke="DarkGray" Stretch="Fill" StrokeThickness="0.5" X1="0" X2="1" />

                <Button Height="23" Name="SaveSlctFont" Width="130" Margin="0,24,0,8"
                        HorizontalContentAlignment="Center" Click="SaveSlctFont_Click">Save and Close Dialog</Button>
                <Button Height="23" Name="CancelSlctFont" Width="130" Margin="0,12,0,8"
                        HorizontalContentAlignment="Center" Click="CancelSlctFont_Click">Cancel</Button>
            </StackPanel>
        </GroupBox>

        <ListView Name="SysFntLstVw"       
            Grid.Row="1" ItemContainerStyle="{StaticResource ItemContStyle}"
            Margin="4,29,4,4" 
            Padding="2"
            SelectionMode="Single"
            >
            <ListView>...
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
            
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="ChkBx">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <CheckBox IsChecked="{Binding UpdtOnly}" HorizontalAlignment="Center" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Color" Width="35">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Rectangle Width="24" Height="12" Fill="Black"></Rectangle>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Font" DisplayMemberBinding="{Binding Name}" Width="165" />
                </GridView>
            </ListView.View>
        </ListView>

        <ListView Name="SlctFontLstVw"
      Grid.Row="1"  Grid.Column="1" ItemContainerStyle="{StaticResource ItemContStyle}"
      Margin="2,29,6,4" 
      Padding="2"
      FontSize="12"
      SelectionMode="Single"
      >
            <ListView.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="LightGray" />
            </ListView.Resources>
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="UpdtOnly" Width="60" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <CheckBox IsChecked="{Binding UpdtOnly}" HorizontalAlignment="Center" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Color" Width="40">
                       <GridViewColumn.CellTemplate>
                          <DataTemplate>
                             <Rectangle Width="26" Height="12" Fill="{Binding fontColor}"></Rectangle>
                          </DataTemplate>
                       </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="Font" DisplayMemberBinding="{Binding Name}" Width="145" />
                </GridView>
            </ListView.View>
        </ListView>
        <StackPanel Grid.Column="1" Height="172" Margin="2,2,2,0" Name="stackPanel1" VerticalAlignment="Top">
            
           <ListBox x:Uid="ListBox_4"  Margin="3 9 0 0" Padding="3" BorderThickness="0.75" 
                    Name="TextColorListBox" IsTabStop="false" TabIndex="-1" Height="160" 
                    SelectionChanged="TextColorSelected" ></ListBox>
        </StackPanel>
        <Label Grid.Column="1" Grid.Row="1" Height="28" Margin="2,3,2,0" Name="label1" VerticalAlignment="Top">
            Select a Font (below) and then a Color (above).   
        </Label>
        <Label Grid.Row="1" Height="28" Margin="4,2,4,0" Name="label2" VerticalAlignment="Top">
            Drag a System Font (below) to the Selected ListView (right).
        </Label>
    </Grid>


</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions