将自定义FontFamily绑定到TextBlocks列表

时间:2018-09-11 12:28:06

标签: c# data-binding uwp uwp-xaml

我很确定我会以错误的方式进行操作,但是将我推向正确方向的任何帮助将不胜感激。

基本上,我试图添加自定义字体的列表,然后将其显示在TextBlocks列表中,但是无论我尝试了多少种不同的方式,我都会不断遇到相同的错误,但是这样做并不会带来很多麻烦对我来说很有意义。

  

错误:BindingExpression路径错误:在“ Windows.UI.Xaml.Media.FontFamily”上找不到“ FontFamilyList”属性。 BindingExpression:Path ='FontFamilyList'DataItem ='Windows.UI.Xaml.Media.FontFamily';目标元素是“ Windows.UI.Xaml.Controls.TextBlock”(名称=“ FontSelector”);目标属性为“ FontFamily”(类型为“ FontFamily”)

最终结果应该是连续24个TextBlock,每个文本块都包含字符串“ abcdef”,但每个字体都使用不同的字体。

这是我到目前为止尝试过的。

课程

public static class CustomFonts
{
    public static FontFamily sketchy = new FontFamily("/Assets/font/a_bit_sketchy.ttf#sketchy");
    public static FontFamily adam = new FontFamily("/Assets/font/adam.cg_pro.otf#adam");
    public static FontFamily addled = new FontFamily("/Assets/font/addled.TTF#addled");
    public static FontFamily adventure = new FontFamily("/Assets/font/adventure.ttf#adventure");
    public static FontFamily agentorange = new FontFamily("/Assets/font/agentorange#agentorange");
    public static FontFamily arial = new FontFamily("/Assets/font/arial.ttf#arial");
    public static FontFamily bira = new FontFamily("/Assets/font/bira.ttf#bira");
    public static FontFamily blueprint = new FontFamily("/Assets/font/blueprint.otf#blueprint");
    public static FontFamily branbollFet = new FontFamily("/Assets/font/branbollFet.ttf#branbollFet");
    public static FontFamily budmo = new FontFamily("/Assets/font/budmo_jiggler.otf#budmo");
    public static FontFamily childs = new FontFamily("/Assets/font/childs.ttf#childs");
    public static FontFamily collegiate = new FontFamily("/Assets/font/collegiate.ttf#collegiate");
    public static FontFamily comesinhandy = new FontFamily("/Assets/font/comesinhandy.ttf#comesinhandy");
    public static FontFamily dknanuk = new FontFamily("/Assets/font/dk_nanuk.otf#dknanuk");
    public static FontFamily itcedscr = new FontFamily("/Assets/font/itcedscr.TTF#itcedscr");
    public static FontFamily levi = new FontFamily("/Assets/font/levi_brush.TTF#levi");
    public static FontFamily lobster = new FontFamily("/Assets/font/lobster.otf#lobster");
    public static FontFamily missionscript = new FontFamily("/Assets/font/mission_script.otf#mission");
    public static FontFamily moonbold = new FontFamily("/Assets/font/moon_bold.otfmoonbold");
    public static FontFamily moonlight = new FontFamily("/Assets/font/moon_light.otf#moonlight");
    public static FontFamily permanentmarker = new FontFamily("/Assets/font/permanentmarker.ttf#permanent");
    public static FontFamily phosphate = new FontFamily("/Assets/font/phosphate.ttc#phosphate");
    public static FontFamily ralewaydots = new FontFamily("/Assets/font/raleway_dots.ttf#raleway");
    public static FontFamily rosewood = new FontFamily("/Assets/font/rosewood.otf#rosewood");

    public static List<FontFamily> FontFamilyList;

    public static List<FontFamily> PopulateFonts()
    {
        FontFamilyList = new List<FontFamily>
        {
            sketchy,
            adam,
            addled,
            adventure,
            agentorange,
            arial,
            bira,
            blueprint,
            branbollFet,
            budmo,
            childs,
            collegiate,
            comesinhandy,
            dknanuk,
            itcedscr,
            levi,
            lobster,
            missionscript,
            moonbold,
            moonlight,
            permanentmarker,
            phosphate,
            ralewaydots,
            rosewood
        };
        return FontFamilyList;
    }
}

设置ItemsSource

public DesignView()
{
    InitializeComponent();
    FontList.ItemsSource = CustomFonts.PopulateFonts();
}

XAML

<Grid Height="150" Margin="0,270,0,0">
    <Image Source="ms-appx:///Resources/Elements/prev_250.png" Height="100" Width="100" HorizontalAlignment="Left"></Image>
    <ListView Name="FontList" ItemsSource="{Binding CustomFonts}"
                ScrollViewer.HorizontalScrollMode="Enabled"
                ScrollViewer.HorizontalScrollBarVisibility="Auto"
                ScrollViewer.IsHorizontalRailEnabled="True" VerticalAlignment="Center" HorizontalAlignment="Center"
                Margin="100,270,100,20"
                Height="70" AutomationProperties.SizeOfSet="24">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid VerticalAlignment="Bottom" Margin="0,0,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                        <TextBlock Name="FontSelector" Text="abcdef" Grid.Column="0" Height="70" Width="70" Margin="1" VerticalAlignment="Center" FontFamily="{Binding FontFamilyList}">
                    </TextBlock>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <Image Source="ms-appx:///Resources/Elements/next_250.png" Height="100" Width="100" HorizontalAlignment="Right"></Image>
</Grid>

2 个答案:

答案 0 :(得分:2)

我做了一个简单的项目,以查看为什么存在问题以及它如何工作。如@eberthold所述,您已覆盖了从UI工作的 A B name 0 1 4 x 1 2 5 x 2 3 6 x 3 1 4 y 4 2 5 y 5 3 6 y 。取而代之的是,您可以只绑定DataContext。另外,您不必具有add'l方法即可创建列表。您可以在类的构造函数中做到这一点。

我将您的班级从ItemsSource更改为Static。为了进行测试,我在列表中添加了系统字体。

Non-Static

这是我的XAML

public class CustomFonts
{
    public FontFamily sketchy = new FontFamily("/Assets/font/a_bit_sketchy.ttf#sketchy");
    public FontFamily adam = new FontFamily("/Assets/font/adam.cg_pro.otf#adam");
    public FontFamily addled = new FontFamily("/Assets/font/addled.TTF#addled");
    public FontFamily adventure = new FontFamily("/Assets/font/adventure.ttf#adventure");
    ...

    public List<FontFamily> FontFamilyList { get; set; }

    public CustomFonts()
    {
        FontFamilyList = new List<FontFamily>
        {
            new FontFamily("Times New Roman"),
            new FontFamily("Monotype Corsiva"),
            new FontFamily("Cambria"),
            new FontFamily("Calibri")
        };

        //FontFamilyList = new List<FontFamily>
        //{
        //    sketchy,
        //    adam,
        //    addled,
        //    adventure,
        ///   ....
        //};
    }
}

因此,我将XAML中<Grid> <ListView Name="FontList" AutomationProperties.SizeOfSet="24" ItemsSource="{Binding FontFamilyList}"> <ListView.DataContext> <app4:CustomFonts /> </ListView.DataContext> <ListView.ItemTemplate> <DataTemplate> <TextBlock Text="ABCDEF" FontFamily="{Binding }"/> </DataTemplate> </ListView.ItemTemplate> </ListView> </Grid> 的{​​{1}}直接设置为DataContext类。然后,我将FontList属性直接绑定到ItemsSoure。由于您要将FontFamily绑定到CustomFonts的{​​{1}}属性,并且该属性是列表中的元素,因此它将只是FontFamiltList

下面是输出。

enter image description here

答案 1 :(得分:1)

据我所知,搞砸了Binding / DataContext

在XAML中,您将ItemsSource指定为CustomFonts类

<ListView Name="FontList" ItemsSource="{Binding CustomFonts}"

DesingView代码破坏了此绑定,并将一个List设置为ItemsSource-对我来说,这似乎是正确的ItemsSource

FontList.ItemsSource = CustomFonts.PopulateFonts();

因此,您的DataTemplate中具有不同的DataContext。 根据XAML的指定,您的列表将包含一项带有DataContext CustomFont的项。 您的DesignView将有24个具有DataContext FontFamily的项目。

要使您的DesignView工作,您将必须将DataTemplate中的FontFamily绑定更新为

<TextBlock Name="FontSelector" Text="abcdef" Grid.Column="0" Height="70" Width="70" Margin="1" VerticalAlignment="Center" FontFamily="{Binding}">