Biggle's Blog

Web- und Software Development

by Mario Priebe

MultiBinding die Zweite

Ich hatte schon vor einiger Zeit gezeigt (puh, schon wieder 1 1/2 Jahre her..) , wie man im XAML ein MultiBinding implementiert. Nun stand ich vor einem Problem, das ich im XAML ein paar Elemente definiere und im Code weitere Elemente zur Laufzeit hinzufüge. Diese Elemente wollte ich nun vernünftig zusammenbringen.

Im Code benötige ich eine Slider-Property und eine Property Namens “Caption”, welche einen Text halten soll. Im Xaml habe ich ein TextBlock-Element, welcher den Inhalt der Caption-Property und den aktuellen Wert des Sliders anzeigen soll.

1
2
public string Caption { get; set; }
public Slider Slider { get; set; }
1
<TextBlock Grid.ColumnSpan="3" Name="CaptionTxtBlock" />

Der Slider, welcher von aussen gesetzt wird, bekommt im “Loading” noch ein paar Eigenschaften und die Position im UserControl mit:

1
2
3
4
Slider.Name = "slider";
Slider.SetValue(Grid.RowProperty, 1);
Slider.SetValue(Grid.ColumnProperty, 1);
SliderGrid.Children.Add(Slider);

Anschliessend baue ich mir ein MultiBinding-Objekt, dass nun die beiden benötigen Properties an meiner TextProperty des TextBlockes bindet und entsprechend formatiert ausgibt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
MultiBinding mb = new MultiBinding()
{
    Mode = BindingMode.TwoWay,
    UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged,
    StringFormat = "{0} ({1:00} %)"
};
 
Binding sliderBinding = new Binding()
{
    Source = Slider,
    Path = new PropertyPath("Value")
};
 
Binding captionBinding = new Binding()
{
    Source = this,
    Path = new PropertyPath("Caption")
};
 
mb.Bindings.Add(captionBinding);
mb.Bindings.Add(sliderBinding);
 
BindingOperations.SetBinding(CaptionTxtBlock, TextBlock.TextProperty, mb);

Und so sieht das ganze dann aus:

Download Code

Viel Spaß beim entwickeln : )

by Mario Priebe

ToolTip an einem “disabled Button” – XAML Quicky

Stellt man einen Button auf “disabled”, wird leider kein Tooltip mehr angezeigt. Möchte man dem entgegenwirken, verwendet man die Methode ShowOnDisabled am ToolTipService:

1
<Button Content="Hier klicken" ToolTipService.ShowOnDisabled="True" IsEnabled="False" ToolTip="Hier klicken"/>

Viel Spaß beim entwickeln : )


by Mario Priebe

TextTrimming – XAML Quicky

Im XAML hat man die Möchglichkeit den Text zu kürzen, wenn dieser länger ist, als die Oberfläche es zulässt.

Man kann bestimmen, ob man nach einem Wort (WordEllipsis) und nach einem Buchstaben (CharacterEllipsis) den Text abtrennt. 3 Punkte (…) zeigen dem Benutzer an, das hier weiterer Text hinterlegt ist.

1
2
<TextBlock  Name="sampleTextBlock" TextTrimming="WordEllipsis"  TextWrapping="NoWrap" 
                    Text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."/>

Viel Spaß beim entwickeln : )

by Mario Priebe

Doppelklick im DataGrid abfangen – WPF Quicky

Möchte man auf den Klick eines Datensatzes  in einem WPF DataGrid reagieren, so kann man folgenden Code dazu verwenden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
private void dataGrid_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
    DependencyObject dep = (DependencyObject)e.OriginalSource;
 
    while ((dep != null) && !(dep is DataGridRow))
    {
        dep = VisualTreeHelper.GetParent(dep);
    }
 
    if (dep == null)
        return;
 
    if (dep is DataGridRow)
    {
        DataGridRow dataGridRow = dep as DataGridRow;
        //tu was
    }
}

Den Klick auf denDataGrid-ColumnHeader oder einer DataGrid-Zelle kann mit der selben Methode behandelt werden. Hier wird einfach die Abfrage mit in das if-Statement aufgenommen und im Rumpf dementsprechend behandelt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
private void dataGrid_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
    DependencyObject dep = (DependencyObject)e.OriginalSource;
 
    while ((dep != null) && !(dep is DataGridRow) && !(dep is DataGridColumnHeader) && !(dep is DataGridCell))
    {
        dep = VisualTreeHelper.GetParent(dep);
    }
 
    if (dep == null)
        return;
 
    if (dep is DataGridRow)
    {
        DataGridRow dataGridRow = dep as DataGridRow;
        //tu was
    }
 
    if (dep is DataGridColumnHeader)
    {
        DataGridColumnHeader columnHeader = dep as DataGridColumnHeader;
        //tu was
    }
 
    if (dep is DataGridCell)
    {
        DataGridCell cell = dep as DataGridCell;
        //tu was
    }
 
}


Viel Spaß beim entwickeln : )

by Mario Priebe

Text innerhalb eines TextBlock-Controls formatieren – XAML

Um einen Text innerhalb einer Textbox zu formatieren, steht einem die Klasse Run zur Verfügung. Run ist ein Element für fortlaufenden Inhalt auf Inlineebene, das formatierten oder unformatierten Lauftext enthalten kann.

1
2
3
4
<TextBlock FontSize="28" TextWrapping="Wrap">
    Hier steht <Run Foreground="Red">Text</Run> der
    <Run FontWeight="Bold" FontStyle="Italic" Foreground="Cyan" FontSize="38" TextDecorations="Underline">verschiedene Formate</Run> darstellt.
</TextBlock>

Einen Zeilenumbruch innerhalb eines Textblocks erreicht man mit

<LineBreak />

Bei einem Hyperlink kann diese Methode auch angewendet werden. (In Silverlight HyperlinkButton)

1
2
3
4
5
6
7
<TextBlock TextWrapping="Wrap">            
    <Hyperlink TextDecorations="None" NavigateUri="http://www.biggle.de">
        <Italic>Hier</Italic> <Bold>steht</Bold> ein <Underline>Hyperlink</Underline>                 
        <LineBreak />      
            über mehrere <Run Foreground="Red">Zeilen</Run>.
    </Hyperlink>
</TextBlock>

Im Hyperlinkbeispiel sieht man auch, wie man den Text kursiv,  fett geschrieben und unterstrichen, noch formatieren kann.

Selbst Bilder können so in einem TextBlock mit dargestellt werden:

1
2
3
4
5
<TextBlock>
    Das bin ich
    <LineBreak />
    <Image Source="/Images/IMG_6911_small.jpg" Width="50" />
</TextBlock>

Es ist auch möglich, innerhalb des Textblock-Controls Werte aus einem Binding heraus darzustellen:

1
2
3
4
5
6
7
8
9
<TextBlock DataContext="{Binding Order}" TextWrapping="Wrap">
    <Run TextDecorations="Underline">Ihre Bestellung</Run>
    <LineBreak />
    <Run>Produkt:</Run>
    <TextBlock Text="{Binding productName}" />
    <Run>(</Run>
        <TextBlock Text="{Binding quantity}" />
    <Run>)</Run>
</TextBlock>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public partial class MainWindow : Window
{
    public Order Order { get; set; }
 
    public MainWindow()
    {
        InitializeComponent();
        LoadOrders();
    }  
    private void LoadOrders()
    {
        Order = new Order();
        Order.productName = "Mountainbike";
        Order.quantity = 1;
 
        this.DataContext = this;
    }
}


Viel Spaß beim entwickeln : )

by Mario Priebe

WPF Tabbing GUI

Für kleine Applikationen mit eine paar Buttons muss man immer wieder ein Menü und einzelne Seiten neu implementieren, oder aber man hat sich eine kleines Framework gebaut, der einem diese Arbeit abnimmt.

Für solche Zwecke, habe ich mich für die zweite Variante entschieden, die ich Euch natürlich nicht vorenthalten möchte. Nix dolles, aber für Übungszwecke ganz gut geworden : ) Ich nenne das Teil einfach mal WPF Tabbing GUI. Mit WPF Tabbing GUI kann man mit wenigen Klicks einen kleinen Applikationsrahmen zusammenbauen. Über der Konfiguration “klickt” man sich die Navigations-Items mit den dazugehörigen Pages und Icons zusammen und definiert ob man das Menu oben, unten, rechts oder links haben möchte. Anschließend muss man nur noch für jede Page (View) ein ViewModel und ein Model implementieren und fertig.

Das Simple-WPF-GUI-Framework besteht lediglich aus ein TabControl, etwas Styling  und ein bissle Konfiguration. Ich möchte jedoch anmerken, das die GUI ein ausbaufähiger Entwurf ist, bei dem noch eine Menge verbessert und erweitert werden kann. Nicht das mir da nachher Beschwerden kommen :p Als Entwurfsmuster habe ich im übrigen MVVM gewählt, da ich hier denke, die meisten unter Euch verwenden dieses Pattern.

Die Technische Umsetzung und Fragen zur Verwendung findet man direkt auf der Projektseite.

Also einfach mal ausprobieren, kostet nix : )