none
Microsoft Blend, VB, Listbox.FontSize, Listbox.ItemHeight RRS feed

  • Frage

  • Hei,

    Zur Zeit adaptiere ich ein Wörterbuch, das ich unter VB.NET entwickelt habe, mit Microsoft Blend für Visual Studio 2015 für den Microsoft Store. Bislang bin ich schon relativ weit gekommen, bin nun aber auf zwei Probleme gestossen, bei denen ich trotz intensivem Suchen im Internet bislang keine Antwort gefunden habe.

    Beim ersten Problem geht es um die Eigenschaft "ListBox.FontSize", bei der sich entgegen meinen Erwartungen die Fontsize der Items nicht dynamisch im Programm ändern lässt. Ich versuchte auch, die Fontsize im XAML-Teil zu ändern. Leider war auch dieser Versuch erfolglos. In VB.NET funktioniert mit "ListBox.Font" alles bestens.

    Beim zweiten Problem geht es darum, die Höhe der Items dynamisch im Programm modifizieren zu können. Unter VB.NET verwende ich hierzu die Eigenschaft "ListBox.ItemHeight". in Microsoft Blend habe ich bei der ListBox keine solche Eigenschaft gefunden. Oder habe ich hier etwas übersehen?

    Wäre toll, wenn mir hier jemand auf die Sprünge helfen könnte.

    Markus

    Samstag, 16. Januar 2016 09:35

Antworten

  • Hallo Markus,

    zunächst etwas zur Begrifflichkeit: WPF und UWP (Universal Windows Projects) basieren beim Design zwar beide auf XAML, technisch haben diese jedoch kaum etwas gemeinsam. WPF ist nur für den Desktop konzipiert, wenn auch Techniken für die Touch Bedienung enthalten sind. UWPs dagegen besitzen vollkommen andere Fähigkeiten, mit denen sich die Anwendung automatisch an verschiedene Bildschirmgrößen usw. anpassen kann.

    Das Neu schreiben einer bestehenden Desktop Anwendung als App lässt sich erfahrungsgemäß nicht ohne gut überlegtes, vorher angefertigtes Konzept erledigen. Das größte Problem ist, dass die Anwendung auf allen Bildschirmgrößen mit allen Auflösungen zurecht kommen muss. Da ist das Eingreifen in die Schrift- und Elementgrößen selten angebracht.

    Zum eigentlichen Problem: Wenn du eine ListView/Box o.ä. befüllen willst, so solltest du das über eine Datenbindung tun. Das ist der einzige ordentliche Weg im Zusammenspiel mit XAML. Das lernt man normalerweise nicht von heute auf morgen, aber der Mehraufwand zahlt sich i.d.R. schnell aus. Siehe dafür: Datenbindung (MSDN)

    Wenn du die Items bindest und im XAML ein Template für sie anlegst, so kannst du darin die Schriftgröße festlegen. Anders scheint es wirklich nicht zu gehen, auch nicht über einen Style fürs Item selbst oder den enthaltenen TextBlock. Eines der Beispiele dafür, das man ohne Bindings fast nichts an der UI machen kann.

    Für die Item-Größe gilt das Selbe. Diese kannst du nur im Template anpassen. Ich möchte dir hier noch zu bedenken geben, dass ein normaler Button am Windows Desktop ca. 23/96 Zoll hoch ist. Das ist per Touch nur schlecht bedienbar, die Elemente sollten mindestens ca. doppelt so groß sein. Lange Listen bringen außerdem nichts, hier solltest du über eine Such/Filterfunktion nachdenken.

    Apps für alle Geräte entwickeln ist mit dem von Microsoft bereit gestellten Werkzeugen einfacher als auf anderen Plattformen, trotzdem muss man sich hier allen nötigen Konzepten bewusst werden.

    PS: Die mit Blend erstellte Projektmappe kannst du auch im normalen VS öffnen. Hier hast du dann eine bessere Unterstützung wenn du Codebehind schreibst.


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Samstag, 16. Januar 2016 17:55
  • Hallo Tom,

    Das mit dem Ändern der Fontgrösse funktioniert nun. War etwas trickreich, aber sehr interessant.

    XAML

        x:Class="ListBox_Databinding_1.MainPage"
        Name="w1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ListBox_Databinding_1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ListBox x:Name="listBox1" ItemsSource="{Binding  ElementName=w1, Path=lst1}" HorizontalAlignment="Left" Margin="364,201,0,150" Width="425" Background="#FFA29C1E">
            <ListBox.ItemTemplate>
                <DataTemplate>
                        <TextBlock x:Name="listBoxTextBlock1" FontSize ="{Binding  ElementName=w1, Path=fntsz1, Mode=OneTime}" Text = "{Binding}" VerticalAlignment="Top"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
            </ListBox>
            <Button x:Name="button" Content="Fontsize" Height="50" Margin="94,321,0,0" VerticalAlignment="Top" Width="154"/>
        </Grid>

    VB

    Public NotInheritable Class MainPage
        Inherits Page
       Public Property lst1 As New ObservableCollection(Of String)
        Public Property fntsz1 As Integer
        Sub New()

            ' Dieser Aufruf ist für den Designer erforderlich.
            InitializeComponent()

            ' Fügen Sie Initialisierungen nach dem InitializeComponent()-Aufruf hinzu.
            Init()
            fntsz1 = 10
        End Sub
        Sub Init()

            lst1.Add("Zeile 1")
            lst1.Add("Zeile 2")
            lst1.Add("Zeile 3")
            lst1.Add("Zeile 4")
        End Sub

        Private Sub button_Click(sender As Object, e As RoutedEventArgs) Handles button.Click
            lst1.Clear()
            fntsz1 = fntsz1 + 10
            If fntsz1 > 50 Then fntsz1 = 10
            '     UpdateLayout()       ' Funktioniert offenbar nicht
            Init()
        End Sub
    End Class

    Ich muss nach dem Ändern einfach die Listbox neu füllen.

    Bin übrigens noch auf zahlreiche Links gestossen, wobei der folgende interessant ist:

    http://www.codeproject.com/Tips/650456/Databinding-Examples-in-WPF-for-VB-NET

    Interessant scheint mir auch das Buch "Microsoft Visual Basic, 2013 Step by Step" von Michael Halvorson

    Mit nochmaligem Dank für deine Hilfe und vielen Grüssen

    Markus


    Sonntag, 24. Januar 2016 09:13

Alle Antworten

  • Hallo Markus,

    ich denke Du verwechselst hier zwei Dinge.

    Zum einen gibt es die Programmiersprache z.B. VB.NET oder C#, und dann gibt es unterschiedliche Oberflächenbibliotheken z.B Windows-Forms oder WPF.

    Ich vermute Du bist von Windows-Forms auf WPF  umgestiegen. Bei WPF wird die Programiersprache nur für Code-Behind genutzt bei Windows Forms wurde auch die Oberfläche mit der genutzten Progammiersprache gestaltet.

    Könnten wir die Rahmenbedingungen erst einmal festlegen?

    Grüße 

    Roland

    Samstag, 16. Januar 2016 11:04
  • Hallo Markus,

    Die Schriftgröße kannst du eigentlich ohne Probleme im XAML festlegen:

    <ListBox FontSize="20" ...

    Alternativ kannst du das Control auch im Designer auswählen und die Eigenschaft über das Eigenschaftenfenster abändern.

    Die Höhe der Items sollte sich im Idealfall an den Inhalt anpassen. Das geht eigentlich auch Problemlos, sofern man die Liste gebunden hat. Hierfür wäre es wichtig zu sehen wie deine Datenstruktur und die Definition des Controls aussieht und was du als Design geplant hast.

    @Roland Er entwickelt eine Windows Store App, hier ist nur die Frage ob noch für Windows 8.1 oder für Windows 10.


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Samstag, 16. Januar 2016 12:50
  • Hallo Roland

    Vielen Dank. Das ging aber sehr schnell.

    Genau, ich bin von VB.NET  auf WPF und damit offenbar auch auf eine "Universal Windows"-Anwendung umgestiegen, weil es für mich nicht sehr einfach ist, eine "One Click"-Applikation anzubieten. Dank WPF sollte es möglich sein, diese Anwendung über den Microsoft Store  anbieten zu können. Deshalb habe ich von Visual Studio zu Microsoft Blend gewechselt, denn nach vielen Versuchen sehe ich, dass ich unter dem Menu Item Projekt auch einen aktiven Eintrag "Store" habe.

    Wollte auch ein ScreenCapture vom bisherigen Wörterbuch, das ich unter VB.NET entwickelt hatte, beifügen. Zuerst muss aber offenbar noch mein Konto überprüft werden.


    Um die Listbox auf der linken Seite des Trennbalkens möglichst kompakt zu halten, verwendete ich in VB.NET die Eigenschaften "ListBox.Font = NEW Font(....)" und "ListBox.ItemHeight = ...". Dank "ListBox.Font" kann der Benutzer die für ihn passende Fontgrösse auswählen und dank "ListBox.ItemHeight" wird die Liste sehr kompakt dargestellt.

    Genau dasselbe sollte auch bei der Store App möglich sein. Genau hier komme ich aber im Augenblick nicht mehr weiter, denn selbst bei einem einfachen Test

    ublic NotInheritable Class MainPage
        Inherits Page
        Sub New()

            ' Dieser Aufruf ist für den Designer erforderlich.
            InitializeComponent()

            ' Fügen Sie Initialisierungen nach dem InitializeComponent()-Aufruf hinzu.

            listBox1.FontStyle = Windows.UI.Text.FontStyle.Italic
            listBox1.FontSize = 6
            listBox1.Items.Add("First Line")
            listBox1.Items.Add("Second Line")
            listBox1.Items.Add("Third Line")
            listBox1.Items.Add("Fourth Line")
        End Sub
    End Class

    kann ich die Fontgrösse nicht ändern

    PS: Die App sollte für Windows 10 entwickelt werden.

    Vielen Dank und viele Grüsse

    Markus

    Samstag, 16. Januar 2016 17:05
  • Hallo Tom,

    Auch hier ging es unterwartet schnell mit einer Antwort und auch hier vielen Dank.

    Wie du siehst, arbeite ich bei einem kleinen Test mit "ListBox.Font = 6". Anstelle der Grösse "6" könnte ich aber auch eine andere Grösse verwenden, das Ergebnis ändert sich dabei nicht. Auch eine Änderung in XAML hat keinen Einfluss auf die Fontgrösse. Interessanterweise funktioniert aber die Eigenschaft "FontStyle" und die Einträge werden kursiv dargestellt.

    Public NotInheritable Class MainPage
        Inherits Page
        Sub New()

            ' Dieser Aufruf ist für den Designer erforderlich.
            InitializeComponent()

            ' Fügen Sie Initialisierungen nach dem InitializeComponent()-Aufruf hinzu.

            listBox1.FontStyle = Windows.UI.Text.FontStyle.Italic
            listBox1.FontSize = 6
            listBox1.Items.Add("First Line")
            listBox1.Items.Add("Second Line")
            listBox1.Items.Add("Third Line")
            listBox1.Items.Add("Fourth Line")
        End Sub
    End Class

    Der Test wurde dabei in Microsoft Blend für Visual Studio mit den Standardeinstellungen für die ListBox durchgeführt.

    Bei der Liste besteht zwischen den Items auch ein sehr grosser Zeilenabstand und ich möchte die Liste gerne kompakter haben, denn die Liste enthält sehr viele Einträge (im Augenblick über 14'500).

    Leider kann ich zum heutigen Zeitpunkt noch kein Screencapture beifügen, denn offensichtlich muss mein Konto noch geprüft werden.

    Die Windows Store App sollte übrigens für Windows 10 erstellt werden.

    Nochmals vielen Dank und viele Grüsse

    Markus


    Samstag, 16. Januar 2016 17:22
  • Hallo Markus,

    zunächst etwas zur Begrifflichkeit: WPF und UWP (Universal Windows Projects) basieren beim Design zwar beide auf XAML, technisch haben diese jedoch kaum etwas gemeinsam. WPF ist nur für den Desktop konzipiert, wenn auch Techniken für die Touch Bedienung enthalten sind. UWPs dagegen besitzen vollkommen andere Fähigkeiten, mit denen sich die Anwendung automatisch an verschiedene Bildschirmgrößen usw. anpassen kann.

    Das Neu schreiben einer bestehenden Desktop Anwendung als App lässt sich erfahrungsgemäß nicht ohne gut überlegtes, vorher angefertigtes Konzept erledigen. Das größte Problem ist, dass die Anwendung auf allen Bildschirmgrößen mit allen Auflösungen zurecht kommen muss. Da ist das Eingreifen in die Schrift- und Elementgrößen selten angebracht.

    Zum eigentlichen Problem: Wenn du eine ListView/Box o.ä. befüllen willst, so solltest du das über eine Datenbindung tun. Das ist der einzige ordentliche Weg im Zusammenspiel mit XAML. Das lernt man normalerweise nicht von heute auf morgen, aber der Mehraufwand zahlt sich i.d.R. schnell aus. Siehe dafür: Datenbindung (MSDN)

    Wenn du die Items bindest und im XAML ein Template für sie anlegst, so kannst du darin die Schriftgröße festlegen. Anders scheint es wirklich nicht zu gehen, auch nicht über einen Style fürs Item selbst oder den enthaltenen TextBlock. Eines der Beispiele dafür, das man ohne Bindings fast nichts an der UI machen kann.

    Für die Item-Größe gilt das Selbe. Diese kannst du nur im Template anpassen. Ich möchte dir hier noch zu bedenken geben, dass ein normaler Button am Windows Desktop ca. 23/96 Zoll hoch ist. Das ist per Touch nur schlecht bedienbar, die Elemente sollten mindestens ca. doppelt so groß sein. Lange Listen bringen außerdem nichts, hier solltest du über eine Such/Filterfunktion nachdenken.

    Apps für alle Geräte entwickeln ist mit dem von Microsoft bereit gestellten Werkzeugen einfacher als auf anderen Plattformen, trotzdem muss man sich hier allen nötigen Konzepten bewusst werden.

    PS: Die mit Blend erstellte Projektmappe kannst du auch im normalen VS öffnen. Hier hast du dann eine bessere Unterstützung wenn du Codebehind schreibst.


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Samstag, 16. Januar 2016 17:55
  • Hallo Tom

    Vielen Dank für deine wertvollen Erläuterungen, die mir sehr weiter helfen. Ich habe das Ganze offensichtlich unterschätzt und ich gehe davon aus, dass ich mich nun richtig in dieses Gebiet einarbeiten muss. Habe das Wörterbuch, das ich in VB.NET erstellt habe, vor einiger Zeit auf Android angepasst und dank B4A ging dies recht speditiv voran. Deshalb ging ich davon aus, dass der Aufwand beim Anpassen an den Windows Store ähnlich sein würde.

    Betreffs Microsoft Blend habe ich einige Versuche gemacht. Dabei habe ich kleine Projekte mit einer Listbox erstellt, die ich dann vollständig im Designer erstellt habe. Im Designer habe ich auch einige Items eingefüllt. Das Merwürdige ist, dass bei einem WPF-Projekt alles wunderbar funktioniert (auch bei C++ und C#) und sobald ich die Fontgrösse und den Fonttyp im Designer ändere, wird dies sofort angezeigt. Auch die Zeilenabstände wurden entsprechend angepasst. Sobald ich aber ein Universelles Windows Projekt für den Store erstellen möchte, funktionieren die Fontangaben mit Ausnahme von "Italics" nicht mehr. In der XAML-Datei wird zwar alles nachgeführt, bei der Anzeige ändert sich aber nichts. Ich vermute, dass irgendwo etwas schief läuft und dass ich Microsoft Blend evtl. erneut installieren muss.

    Habe auch Projekte zwischen Microsoft Blend und Visual Studio hin und her geschoben. Von Visual Studio nach Blend ist dies kein Problem. Von Blend kann ich nur WPF-Projekte, nicht aber Universelle Windows Projekte in Visual Studio übernehmen.

    Das Wörterbuch wurde bereits vor mehreren Jahren entwickelt und ich wollte damals mit SQL-Light arbeiten. Die Datenbank wurde aber so gross, dass ich mich entscheiden musste, mit einer eigenen Dateistruktur zu arbeiten, die gegenüber der SQL-Datenbank wesentlich kleiner war. Unter Android arbeite ich übrigens mit einer SQL-Light Datenbank.

    Wie erwähnt, werde ich mich nun weiter mit Microsoft Blend und damit auch mit der Datenbindung befassen. Sobald ich etwas weiter herausfinde, werde ich dies hier posten. Wer weiss, vielleicht haben auch andere Personen ähnliche Probleme.

    Nochmals herzlichen Dank für deine wertvollen Informationen und viele Grüsse

    Markus

    Sonntag, 17. Januar 2016 09:08
  • Hallo Tom,

    Das mit dem Ändern der Fontgrösse funktioniert nun. War etwas trickreich, aber sehr interessant.

    XAML

        x:Class="ListBox_Databinding_1.MainPage"
        Name="w1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ListBox_Databinding_1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <ListBox x:Name="listBox1" ItemsSource="{Binding  ElementName=w1, Path=lst1}" HorizontalAlignment="Left" Margin="364,201,0,150" Width="425" Background="#FFA29C1E">
            <ListBox.ItemTemplate>
                <DataTemplate>
                        <TextBlock x:Name="listBoxTextBlock1" FontSize ="{Binding  ElementName=w1, Path=fntsz1, Mode=OneTime}" Text = "{Binding}" VerticalAlignment="Top"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
            </ListBox>
            <Button x:Name="button" Content="Fontsize" Height="50" Margin="94,321,0,0" VerticalAlignment="Top" Width="154"/>
        </Grid>

    VB

    Public NotInheritable Class MainPage
        Inherits Page
       Public Property lst1 As New ObservableCollection(Of String)
        Public Property fntsz1 As Integer
        Sub New()

            ' Dieser Aufruf ist für den Designer erforderlich.
            InitializeComponent()

            ' Fügen Sie Initialisierungen nach dem InitializeComponent()-Aufruf hinzu.
            Init()
            fntsz1 = 10
        End Sub
        Sub Init()

            lst1.Add("Zeile 1")
            lst1.Add("Zeile 2")
            lst1.Add("Zeile 3")
            lst1.Add("Zeile 4")
        End Sub

        Private Sub button_Click(sender As Object, e As RoutedEventArgs) Handles button.Click
            lst1.Clear()
            fntsz1 = fntsz1 + 10
            If fntsz1 > 50 Then fntsz1 = 10
            '     UpdateLayout()       ' Funktioniert offenbar nicht
            Init()
        End Sub
    End Class

    Ich muss nach dem Ändern einfach die Listbox neu füllen.

    Bin übrigens noch auf zahlreiche Links gestossen, wobei der folgende interessant ist:

    http://www.codeproject.com/Tips/650456/Databinding-Examples-in-WPF-for-VB-NET

    Interessant scheint mir auch das Buch "Microsoft Visual Basic, 2013 Step by Step" von Michael Halvorson

    Mit nochmaligem Dank für deine Hilfe und vielen Grüssen

    Markus


    Sonntag, 24. Januar 2016 09:13