Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: validvoid/TextBlockFX
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.0.2
Choose a base ref
...
head repository: validvoid/TextBlockFX
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref
  • 11 commits
  • 17 files changed
  • 2 contributors

Commits on Dec 28, 2021

  1. Update README.md

    validvoid authored Dec 28, 2021
    Copy the full SHA
    1bf764f View commit details
  2. Update README.md

    validvoid authored Dec 28, 2021
    Copy the full SHA
    10565ec View commit details

Commits on Dec 29, 2021

  1. Update README.md

    validvoid authored Dec 29, 2021
    Copy the full SHA
    f229dff View commit details
  2. Use DefaultTextForegroundThemeBrush as default foreground;

    Add default control style properties;
    Update sample app;
    Add icon for nuget;
    validvoid committed Dec 29, 2021
    Copy the full SHA
    de40558 View commit details
  3. Copy the full SHA
    91d5d23 View commit details
  4. Update README.md

    validvoid authored Dec 29, 2021
    Copy the full SHA
    6025958 View commit details

Commits on Jan 13, 2022

  1. Copy the full SHA
    80e267b View commit details
  2. Copy the full SHA
    8e8b3dc View commit details
  3. Add bounce effect;

    Add zoom effect;
    validvoid committed Jan 13, 2022
    Copy the full SHA
    3ca563d View commit details
  4. Add BackIn, BackOut, BackInOut easing functions;

    Rename Bounce effect to Elastic;
    Add Pivot effect;
    validvoid committed Jan 13, 2022
    Copy the full SHA
    43ffebf View commit details

Commits on Jan 14, 2022

  1. Copy the full SHA
    61f5054 View commit details
7 changes: 6 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
![TextBlockFX_Logo_Large](https://user-images.githubusercontent.com/8193074/147546728-6149baa5-a4b1-4c4a-bcc3-01946f741e5b.png)

# TextBlockFX

A TextBlock control which animates the text with customizable effects.

TextBlockFx generates difference results for attached effect to animate the text when its content changes by using its built-in diffing algorithm.
@@ -11,12 +14,14 @@ https://user-images.githubusercontent.com/8193074/147348037-efe70068-d188-4a26-a

### Install

![](https://img.shields.io/nuget/v/TextBlockFX.Win2D.UWP?style=flat-square)

In Solution Explorer panel, right click on your project name and select Manage NuGet Packages. Search for `TextBlockFX.Win2D.UWP` then click **install** to install the package.

Or enter the following command in Package Manager Console to install it:

```powershell
Install-Package TextBlockFX.Win2D.UWP
Install-Package TextBlockFX.Win2D.UWP -Version 1.0.3
```

### Usage
7 changes: 6 additions & 1 deletion Sample.Win2D.UWP/App.xaml
Original file line number Diff line number Diff line change
@@ -7,7 +7,12 @@
<Application.Resources>
<controls:XamlControlsResources>
<controls:XamlControlsResources.MergedDictionaries>
<!-- Other app resources here -->
<ResourceDictionary>
<Style TargetType="controls:Expander">
<Setter Property="Padding" Value="5" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ResourceDictionary>
</controls:XamlControlsResources.MergedDictionaries>
</controls:XamlControlsResources>
</Application.Resources>
77 changes: 77 additions & 0 deletions Sample.Win2D.UWP/Controls/FontPickerBox.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Globalization;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Documents;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Microsoft.Graphics.Canvas.Text;

// The Templated Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234235

namespace Sample.Win2D.UWP.Controls
{
public sealed class FontPickerBox : Control
{
private ComboBox _comboBox;

public FontPickerBox()
{
this.DefaultStyleKey = typeof(FontPickerBox);
}

protected override void OnApplyTemplate()
{
base.OnApplyTemplate();

_comboBox = GetTemplateChild("FontComboBox") as ComboBox;

var fontFamilyNames = CanvasTextFormat.GetSystemFontFamilies(ApplicationLanguages.Languages).OrderBy(k => k);

foreach (string fontFamilyName in fontFamilyNames)
{
ComboBoxItem item = new ComboBoxItem();
item.Content = fontFamilyName;
item.FontFamily = new FontFamily(fontFamilyName);
_comboBox.Items.Add(item);
}

_comboBox.SelectionChanged += ComboBox_SelectionChanged;

SelectDefaultFont();
}

public event SelectionChangedEventHandler SelectionChanged
{
add { _comboBox.SelectionChanged += value; }
remove { _comboBox.SelectionChanged -= value; }
}

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
FontFamily = (_comboBox.SelectedItem as ComboBoxItem).FontFamily;
}

private void SelectDefaultFont()
{
SelectFont("Segoe UI");
}

public void SelectFont(string name)
{
for (int i = 0; i < _comboBox.Items.Count; ++i)
{
ComboBoxItem item = _comboBox.Items[i] as ComboBoxItem;
if ((item.Content as string) == name)
{
_comboBox.SelectedIndex = i;
return;
}
}
}
}
}
180 changes: 122 additions & 58 deletions Sample.Win2D.UWP/MainPage.xaml
Original file line number Diff line number Diff line change
@@ -7,69 +7,133 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:TBFX="using:TextBlockFX.Win2D.UWP"
xmlns:effects="using:TextBlockFX.Win2D.UWP.Effects"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:controls="using:Sample.Win2D.UWP.Controls"
mc:Ignorable="d"
Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<Border
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="4"
Padding="10"
Margin="10">
<ScrollViewer>
<StackPanel Orientation="Vertical" Spacing="10">
<muxc:Expander
IsExpanded="True"
HorizontalAlignment="Stretch"
Header="Effects">
<StackPanel Orientation="Vertical"
Spacing="10"
HorizontalAlignment="Stretch">
<ComboBox x:Name="EffectComboBox"
HorizontalAlignment="Stretch"
ItemsSource="{x:Bind BuiltInEffects}"
DisplayMemberPath="Name"
SelectedValuePath="Effect"
SelectedValue="{x:Bind SelectedEffect, Mode = TwoWay}"
Loaded="EffectComboBox_OnLoaded"/>
</StackPanel>
</muxc:Expander>
<muxc:Expander
IsExpanded="True"
HorizontalAlignment="Stretch"
Header="Text Format">
<StackPanel Orientation="Vertical"
Spacing="10"
HorizontalAlignment="Stretch">
<controls:FontPickerBox x:Name="FontPicker" HorizontalAlignment="Stretch"/>
<muxc:NumberBox x:Name="FontSizeNumBox"
Header="Font size"
Value="36"
SpinButtonPlacementMode="Inline"
Maximum="72"
Minimum="9"
SmallChange="1"
LargeChange="10"/>
<ComboBox x:Name="FontStretchComboBox"
HorizontalAlignment="Stretch"
Header="Font Stretch"
ItemsSource="{x:Bind FontStretches}"
DisplayMemberPath="Name"
SelectedValuePath="Value"/>
<ComboBox x:Name="FontStyleComboBox"
HorizontalAlignment="Stretch"
Header="Font Style"
ItemsSource="{x:Bind FontStyles}"
DisplayMemberPath="Name"
SelectedValuePath="Value"/>
<ComboBox x:Name="FontWeightComboBox"
HorizontalAlignment="Stretch"
Header="Font Weight"
ItemsSource="{x:Bind FontWeightsList}"
DisplayMemberPath="Name"
SelectedValuePath="Value"/>
</StackPanel>
</muxc:Expander>
<muxc:Expander
IsExpanded="True"
HorizontalAlignment="Stretch"
Header="Text">
<StackPanel Orientation="Vertical" Spacing="10" HorizontalAlignment="Stretch">
<ComboBox x:Name="TextComboBox"
Margin="5,0"
MinWidth="200"
HorizontalAlignment="Stretch"
SelectedIndex="{x:Bind SelectedSampleTextIndex, Mode = TwoWay}"
Loaded="TextComboBox_OnLoaded">
<x:String>In Other Words</x:String>
<x:String>Mencius (in Chinese)</x:String>
<x:String>Makenaide (in Japanese)</x:String>
<x:String>"Ode to Joy (Symphony No. 9 in D minor, Op. 125)</x:String>
</ComboBox>
<ToggleButton x:Name="AutoPlayButton"
Margin="5,0"
Click="AutoPlayButton_OnClick"
HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal" Spacing="5">
<SymbolIcon Symbol="Play"/>
<TextBlock Text="Play sample texts"/>
</StackPanel>
</ToggleButton>
<TextBox x:Name="InputBox"
Grid.Row="2"
Grid.ColumnSpan="2"
Margin="10"
AcceptsReturn="True"
TextWrapping="Wrap"
HorizontalAlignment="Stretch"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollBarVisibility="Auto"
TextChanged="InputBox_OnTextChanged"/>
</StackPanel>
</muxc:Expander>
</StackPanel>
</ScrollViewer>
</Border>

<TBFX:TextBlockFX x:Name="TBFX"
Margin="10"
TextWrapping="Wrap"
FontSize="36"
TextAlignment="Center"
TextTrimming="CharacterEllipsis"
RedrawStateChanged="TBFX_OnRedrawStateChanged">
Grid.Column="1"
Margin="10"
FontFamily="{Binding ElementName=FontPicker, Path=FontFamily,Mode=OneWay}"
FontSize="{Binding ElementName=FontSizeNumBox, Path=Value, Mode=OneWay}"
FontStyle="{Binding ElementName=FontStyleComboBox, Path=SelectedValue, Mode= OneWay}"
FontStretch="{Binding ElementName=FontStretchComboBox, Path=SelectedValue, Mode=OneWay}"
FontWeight="{Binding ElementName=FontWeightComboBox, Path=SelectedValue, Mode=OneWay}"
TextAlignment="Center"
TextTrimming="CharacterEllipsis"
TextWrapping="Wrap"
RedrawStateChanged="TBFX_OnRedrawStateChanged">
</TBFX:TextBlockFX>

<CommandBar Grid.Row="1"
IsOpen="False"
DefaultLabelPosition="Right"
HorizontalAlignment="Center">
<AppBarElementContainer VerticalContentAlignment="Center">
<ComboBox x:Name="TextComboBox"
Margin="5,0"
MinWidth="200"
SelectedIndex="{x:Bind SelectedSampleTextIndex, Mode = TwoWay}"
Loaded="TextComboBox_OnLoaded">
<x:String>In Other Words</x:String>
<x:String>Mencius (in Chinese)</x:String>
</ComboBox>
</AppBarElementContainer>
<AppBarSeparator/>
<AppBarElementContainer VerticalContentAlignment="Center">
<TextBlock Text="Effect:" Margin="5,0"/>
</AppBarElementContainer>
<AppBarElementContainer VerticalContentAlignment="Center">
<ComboBox x:Name="EffectComboBox"
Margin="5,0"
MinWidth="200"
ItemsSource="{x:Bind BuiltInEffects}"
DisplayMemberPath="Name"
SelectedValuePath="Effect"
SelectedValue="{x:Bind SelectedEffect, Mode = TwoWay}"
Loaded="EffectComboBox_OnLoaded"/>
</AppBarElementContainer>
<AppBarSeparator/>
<AppBarToggleButton x:Name="AutoPlayButton"
Margin="5,0"
Icon="Play"
Label="Play sample texts"
Click="AutoPlayButton_OnClick"/>
</CommandBar>
<TextBox x:Name="InputBox"
Grid.Row="2"
Grid.ColumnSpan="2"
Margin="10"
AcceptsReturn="True"
TextWrapping="Wrap"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollBarVisibility="Auto"
TextChanged="InputBox_OnTextChanged"/>
</Grid>
</Page>
Loading