Saturday, July 25, 2015

Minimum column width in WPF ListView/GridView

It seems that it is not possible to set the minimum width of a column within XAML. But it can be forced withn code-behind. Laurent Bugnion has found the solution (http://geekswithblogs.net/lbugnion/archive/2008/05/06/wpf-listviewgridview-minimum-and-maximum-width-for-a-column.aspx).

The ListView is defined in the XAML part.
 
            <ListView x:Name="MyListView">
                <!-- ... -->
            <ListView.ContextMenu>

In the constructor of the code-behind part the event handler is added.
 
            ResultDataView.AddHandler(Thumb.DragDeltaEvent,
                new DragDeltaEventHandler(Thumb_DragDelta), true);

The event handler takes care that column width is not set under 20 (in this example).
 
        private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            Thumb senderAsThumb = e.OriginalSource as Thumb;
            GridViewColumnHeader header = senderAsThumb.TemplatedParent as
                                                            GridViewColumnHeader;
            if (header == null)
            {
                return;
            }
 
            if (header.Column.ActualWidth < 20)
            {
                header.Column.Width = 20;
            }
        }


Tuesday, June 23, 2015

Setting the Background of a WPF TextBox depending on Validation in a Template/Style using TemplateBinding

Recently I wanted to change the Background of a TextBox, if some own ValidationRule failed. But I couldn't get this to work. I tried several things and I gained more insights into styling and especially into styling wrong validated elements. And finally I get it to work.

If you are not familiar with WPF validation, here you can find excellent descriptions of how to use validation in WPF:

Now, I come to to initial situation.

Using ValidationRule in WPF

I had a ValidationRule, something like that.
namespace ErrorValidation
{
    public class RangeValidationRule : ValidationRule
    {
        public double Min { getset; }
        public double Max { getset; }
 
        public override ValidationResult Validate(object value,
            CultureInfo cultureInfo)
        {
            double enteredValue;
            if (double.TryParse(value.ToString(), out enteredValue))
            {
                if ((enteredValue < Min) || (enteredValue > Max))
                {
                    return new ValidationResult(false,
                      string.Format("Entered value must be in the range [{0};{1}].",
                      Min, Max));
                }
            }
            else
            {
                return new ValidationResult(false,
                    string.Format("Value '{0}' is not of type double.", value));
            }
 
            return new ValidationResult(truenull);
        }
    }
}
To get access to the ValidationRule the XML namespace is defined in the XAML.
xmlns:validation="clr-namespace:ErrorValidation"
I get access to the ValidationRule in the Window/UserControl Resources.
<validation:RangeValidationRule x:Key="RangeValidationRule" />
Now I can use the ValidationRule to validate user input.
        <TextBox Margin="12,0,12,12">
            <TextBox.Text>
                <Binding Path="InputField1"
                         UpdateSourceTrigger="PropertyChanged">
                    <Binding.ValidationRules>
                        <validation:RangeValidationRule Min="5"
                                                        Max="10" />
                    </Binding.ValidationRules>
                </Binding>
            </TextBox.Text>
        </TextBox>
The default style is used to mark user input that violates the ValidationRule.

Validation styles

So far, so good. But now I wanted to extend my existing TextBox style. If the validation failed, I wanted to change the Background of the TextBox. This was one of my not working tries.
        <Style x:Key="MyWrongTextBoxStyle"
               TargetType="{x:Type TextBox}">
            <Setter Property="Margin"
                    Value="4" />
            <Setter Property="Foreground"
                    Value="DarkBlue" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBoxBase}">
                        <Border Name="Border"
                                CornerRadius="2"
                                BorderThickness="1"
                                Background="White"
                                BorderBrush="LightBlue">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty=
                                                "(Panel.Background).
                                                (SolidColorBrush.Color)">
                                                <EasingColorKeyFrame
                                                    KeyTime="0"
                                                    Value="LightGray" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ReadOnly">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty=
                                                "(Panel.Background).
                                                (SolidColorBrush.Color)">
                                                <EasingColorKeyFrame
                                                    KeyTime="0"
                                                    Value="LightBlue" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ScrollViewer Margin="0"
                                          x:Name="PART_ContentHost" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Validation.ErrorTemplate">
                <Setter.Value>
                    <ControlTemplate>
                        <StackPanel>
                            <DockPanel>
                                <AdornedElementPlaceholder x:Name="Placeholder" />
                                <TextBlock Foreground="Red"
                                           FontSize="18"
                                           Text="!" />
                            </DockPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Foreground="Red"
                                           Text="The value '" />
                                <TextBlock Foreground="Red"
                                           Text="{Binding ElementName=Placeholder,
                                                      Path=AdornedElement.Text}" />
                                <TextBlock Foreground="Red"
                                           Text="' causes an error (see tooltip)" />
                            </StackPanel>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Validation.HasError"
                         Value="True">
                    <Setter Property="ToolTip"
                            Value="{Binding RelativeSource=
                              {x:Static RelativeSource.Self},
                              Path=(Validation.Errors).CurrentItem.ErrorContent}" />
                    <Setter Property="Background"
                            Value="Orange" />
                    <Setter Property="BorderThickness"
                            Value="2" />
                    <Setter Property="BorderBrush"
                            Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>

I tried several combinations with Validation.ErrorTemplate and Validation.HasError. But when should I use Validation.ErrorTemplate and when Validation.HasError? I have not thought much about it, until now. But the answer is not very surprising.

Validation.ErrorTemplate is used to add elements that decorate an existing element. So I cannot use it to change the Background of an existing element. But it can be used to add an image, an exclamation mark, TextBlock or something else next to the evaluated element.


Validation.HasError can be used to add a ToolTip or to change properties of an existing element.
So I should use it to change the color of the Background. But why is it not working?

The problem is how the Template style is defined. If I remove the Setter of the Template property in the Style, it is working. So I have to change the Template.

TemplateBinding

To allow changing a property of a defined Template, TemplateBinding is used. TemplateBinding is a markup extension. The properties that are set by TemplateBinding in the Template Setter can be referrenced outside the Setter of the Template. The default property values of the properties that are set by TemplateBinding can be set by other Setters. It is also possible to set the values in XAML parts that are using the Style. And now it is also possible to set the values by a Trigger, like the Background as I wanted. This is the working code that changes the Background of a TextBox in case of error.
        <Style x:Key="MyTextBoxStyle"
               TargetType="{x:Type TextBox}">
            <Setter Property="Margin"
                    Value="4" />
            <Setter Property="Foreground"
                    Value="DarkBlue" />
            <Setter Property="Background"
                    Value="White" />
            <Setter Property="BorderBrush"
                    Value="LightBlue" />
            <Setter Property="BorderThickness"
                    Value="1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBoxBase}">
                        <Border Name="Border"
                                CornerRadius="2"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty=
                                                "(Panel.Background).
                                                (SolidColorBrush.Color)">
                                                <EasingColorKeyFrame
                                                    KeyTime="0"
                                                    Value="LightGray" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ReadOnly">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty=
                                                "(Panel.Background).
                                                (SolidColorBrush.Color)">
                                                <EasingColorKeyFrame
                                                    KeyTime="0"
                                                    Value="LightBlue" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ScrollViewer Margin="0"
                                          x:Name="PART_ContentHost" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Validation.ErrorTemplate">
                <Setter.Value>
                    <ControlTemplate>
                        <StackPanel>
                            <DockPanel>
                                <AdornedElementPlaceholder x:Name="Placeholder" />
                                <TextBlock Foreground="Red"
                                           FontSize="18"
                                           Text="!" />
                            </DockPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Foreground="Red"
                                           Text="The value '" />
                                <TextBlock Foreground="Red"
                                           Text="{Binding ElementName=Placeholder,
                                                      Path=AdornedElement.Text}" />
                                <TextBlock Foreground="Red"
                                           Text="' causes an error (see tooltip)" />
                            </StackPanel>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Validation.HasError"
                         Value="True">
                    <Setter Property="ToolTip"
                            Value="{Binding RelativeSource=
                              {x:Static RelativeSource.Self},
                              Path=(Validation.Errors).CurrentItem.ErrorContent}" />
                    <Setter Property="Background"
                            Value="Orange" />
                    <Setter Property="BorderThickness"
                            Value="2" />
                    <Setter Property="BorderBrush"
                            Value="Red" />
                </Trigger>
            </Style.Triggers>
        </Style>
And this is the result.


Wednesday, May 13, 2015

Audino - Arduino MP3-Player (18) - PC-Software

Der Audino kann nun verwendet werden. Dazu werden auf der SD-Karte 10 Ordner mit den Namen 0, 1, 2, 3, 4, 5, 6, 7, 8 und 9 angelegt. In den Ordnern 1 bis 9 können nun MP3-Dateien kopiert werden. Die Dateinamen werden ebenfalls durchnummeriert (1.mp3, 2.mp3, 3.mp3, 4.mp3, ...). Die MP3-Dateien sollten dabei im Mono-Format vorliegen, da nur ein Kanal verwendet wird.

Um das Kopieren zu erleichtern, habe ich eine PC-Software erstellt, mit der die Abspiellisten geplant und erzeugt werden können.

Über "Select SD card" wird der Speicherort ausgewählt. dies sollte die SD-Karte sein. Wurden hier schon mit der PC-Software MP3-Tracks kopiert, so werden die gemachten Einträge ausgelesen, sodass diese bearbeitet werden können. Über "Copy to SD card" werden die MP3-Tracks auf die SD-Karte kopiert und umbenannt. Die MP3-Tracks sollten bereits im Mono-Format vorliegen. Mit "Reset" werden alle Einträge gelöscht.


In der Übersicht werden die 9 Knöpfe angezeigt. In den eckigen Klammern steht die Anzahl der Tracks gefolgt von der Spieldauer. Unten links steht die Gesamtanzahl der Tracks und die Gesamtspieldauer. Drückt man auf einen der 9 Knöpfe, kommt man in die Ansicht der hinzugefügten MP3-Tracks. Hier können weitere Tracks hinzugefügt oder wieder rausgelöscht werden.


Bei Interesse kann ich die PC-Software gerne zur Verfügung stellen.

Damit wäre das Projekt "Audino" nun endgültig abgeschlossen


Weitere Blogeinträge

  1. Auswahl der Komponenten
  2. Das Entwicklungsbrett
  3. Das erste Einschalten
  4. Die Entwicklungsumgebung
  5. Knöpfe (digital)
  6. Mehrere Knöpfe (digital)
  7. Mehrere Knöpfe (analog)
  8. Potentiometer
  9. Das MP3 Shield
  10. Auswahl der Komponenten 2
  11. Auswahl der Komponenten (Zusammenfassung) 
  12. Punkt-Streifenrasterplatine und Knöpfe
  13. Punkt-Streifenrasterplatine und weitere Komponenten
  14. Das Gehäuse
  15. Sketch 1 (setup-Methode)
  16. Sketch 2 (loop-Methode)
  17. Sketch 3 (Der komplette Code)
  18. PC-Software

Saturday, April 4, 2015

Audino - Arduino MP3-Player (17) - Sketch 3 (Der komplette Code)

Nachdem die letzten beiden Beiträge den Sketch behandelt und ausführlich erklärt haben, ist hier nochmal der ganze Quellcode dargestellt, der auf das Arduino-Board gespielt wird.
#include <SPI.h>
#include <Adafruit_VS1053.h>
#include <SD.h>
 
#define SHIELD_CS     7      // VS1053 chip select pin (output)
#define SHIELD_DCS    6      // VS1053 Data/command select pin (output)
#define DREQ          3      // VS1053 Data request, ideally an Interrupt pin
#define CARDCS        4      // Card chip select pin
Adafruit_VS1053_FilePlayer musicPlayer =
    Adafruit_VS1053_FilePlayer(SHIELD_CSSHIELD_DCSDREQCARDCS);
 
// VS1053 play speed parameter
#define para_playSpeed 0x1E04
 
// constants won't change
 
// the number of the pin that is used for the pushbuttons
const int buttonsPin = A0;
 
// the pin of the potentiometer that is used to control the volume
const int volumePin = A1;
 
// wait before next click is recognized
const int buttonPressedDelay = 1000;
 
 
// variables will change
 
byte currentFolder = 1;
unsigned int currentFile = 0;
unsigned int numberOfFiles[] = { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 };
 
// the current volume level, set to min at start
byte volumeState = 254;
 
// last button that was pressed
byte lastPressedButton = 0;
// is the last pressed button released
boolean released = true;
// remember if the back button was pressed last time
byte lastReleasedButton = 0;
// the time at the back button was pressed last time
long lastBackButtonTime = 0;
 
char currentTrackFileName[] = "/0/current.txt";
 
// the setup routine runs once when you turn the device on or you press reset
void setup()
{
    // disable LED L
    pinMode(13, OUTPUT);
    digitalWrite(13, LOW);    
 
    // initialize serial communication at 9600 bits per second
    //Serial.begin(9600);
 
    // initialise the music player
    if (!musicPlayer.begin())
    {
        //Serial.println("VS1053 not found");
        while (1);  // don't do anything more
    }
 
    // initialise the SD card
    SD.begin(CARDCS);
 
 
    // If DREQ is on an interrupt pin (on uno, #2 or #3) we can do background
    // audio playing
    musicPlayer.useInterrupt(VS1053_FILEPLAYER_PIN_INT);  // DREQ int
 
    musicPlayer.sineTest(0x44, 100);    // Make a tone to indicate VS1053 is working 
 
    // read the number of tracks in each folder
    for (byte i = 0; i < 10; i++)
    {
        String temp = "/";
        temp.concat(i);
        char filename[3];
        temp.toCharArray(filename, sizeof(filename));
        numberOfFiles[i] = countFiles(SD.open(filename));
        //Serial.print(filename);
        //Serial.print(": ");
        //Serial.println(numberOfFiles[i]);
    }
 
    // read remembered track
    if (SD.exists(currentTrackFileName))
    {
        File file = SD.open(currentTrackFileName, FILE_READ);
        if (file)
        {
            currentFolder = file.readStringUntil('\n').toInt();
            currentFile = file.readStringUntil('\n').toInt() - 1;
        }
        file.close();
    }
 
 
    delay(100); // init delay
}
 
 
// counts the number of files in directory
unsigned int countFiles(File dir)
{
    unsigned int counter = 0;
    while (true)
    {
        File entry = dir.openNextFile();
        if (!entry)
        {
            // no more files
            break;
        }
 
        counter++;
        entry.close();
    }
    dir.close();
 
    return counter;
}
 
// the loop routine runs over and over again forever
void loop()
{
    // play next song if player stopped
    if (musicPlayer.stopped())
    {
        playNext();
    }
 
    // check the volume and set it
    checkVolume();
 
    // check if a button is pressed and perform some action
    checkButtons();
 
    delay(1); // delay in between reads for stability
}
 
 
// checks the value of the potentiometer
// if it has changed by 2 then set the new volume
void checkVolume()
{
    // read the state of the volume potentiometer
    int read = analogRead(volumePin);
 
    // set the range of the volume from max=0 to min=254
    // (limit max volume to 20 and min to 60) 
    byte state = map(read, 0, 1023, 20, 60);
 
 
    // recognize state (volume) changes in steps of two
    if (state < volumeState - 1 || state > volumeState + 1)
    {
        // remember the new volume state
        volumeState = state;
 
        // set volume max=0, min=254
        musicPlayer.setVolume(volumeState, 254);
 
        // print out the state of the volume
        //Serial.print(volumePin);
        //Serial.print(" volume ");
        //Serial.println(volumeState);
    }
}
 
// check if some button is pressed
// play first track, if button is not pressed last time
// play next track, if a button is pressed again
void checkButtons()
{
    // get the pressed button
    byte pressedButton = getPressedButton();
 
    // if a button is pressed
    if (pressedButton != 0)
    {
        //Serial.print("Taste: ");
        //Serial.println(pressedButton);
 
        // if a track/play list button is pressed
        if (pressedButton < 10 && released)
        {
            musicPlayer.stopPlaying();
            if (currentFolder == pressedButton)
            {
                playNext();
            }
            else
            {
                currentFolder = pressedButton;
                currentFile = 1;
                playCurrent();
            }
 
        }
        // if a function button is pressed
        else
        {
            if (pressedButton == 10 && released)
            {
                musicPlayer.stopPlaying();
                long time = millis();
 
                // this is the second press within 1 sec., so we 
                // got to the previous track
                if (lastReleasedButton == 10 && 
                    ((time - lastBackButtonTime) < buttonPressedDelay))
                {
                    playPrevious();
                }
                else
                {
                    playCurrent();
                }
                lastBackButtonTime = time;
            }
            else if (pressedButton == 11 && released)
            {
                // increase play speed
                musicPlayer.sciWrite(VS1053_REG_WRAMADDRpara_playSpeed);
                musicPlayer.sciWrite(VS1053_REG_WRAM, 3);
                //Serial.println("increase speed");
            }
        }
 
        released = false;
        lastReleasedButton = pressedButton;
    }
    else
    {
        released = true;
 
        // reset play speed
        if (lastPressedButton == 11)
        {
            musicPlayer.sciWrite(VS1053_REG_WRAMADDRpara_playSpeed);
            musicPlayer.sciWrite(VS1053_REG_WRAM, 1);
        }
    }
 
    // remember pressed button
    lastPressedButton = pressedButton;
}
 
 
void playPrevious()
{
    currentFile--;
    if (currentFile < 1)
    {
        currentFile = numberOfFiles[currentFolder];
    }
    playCurrent();
}
 
void playNext()
{
    currentFile++;
    if (currentFile > numberOfFiles[currentFolder])
    {
        currentFile = 1;
    }
    playCurrent();
}
 
void playCurrent()
{
    if (numberOfFiles[currentFolder] > 0)
    {
        rememberCurrentTrack();
 
        String temp = "/";
        temp.concat(currentFolder);
        temp.concat("/");
        temp.concat(currentFile);
        temp.concat(".mp3");
        char filename[temp.length() + 1];
        temp.toCharArray(filename, sizeof(filename));
        musicPlayer.startPlayingFile(filename);
 
        //Serial.print("Play ");
        //Serial.println(filename);
    }
}
 
void rememberCurrentTrack()
{
    if (SD.exists(currentTrackFileName))
    {
        SD.remove(currentTrackFileName);
    }
 
    File file = SD.open(currentTrackFileName, FILE_WRITE);
    if (file)
    {
        file.println(currentFolder);
        file.println(currentFile);
    }
    file.close();
}
 
 
// returns 0 if no button is pressed,
// else the number of the pressed button is returned (1 - 11)
byte getPressedButton()
{
    int buttonsPinValue = analogRead(buttonsPin);
    byte pressedButton = 0;
 
    if (buttonsPinValue > 823)
    {
        // button 6 has a value of about 878
        pressedButton = 6;
    }
    else if (buttonsPinValue > 725)
    {
        // button 5 has a value of about 768
        pressedButton = 5;
    }
    else if (buttonsPinValue > 649)
    {
        // button 4 has a value of about 683
        pressedButton = 4;
    }
    else if (buttonsPinValue > 586)
    {
        // button 3 has a value of about 614
        pressedButton = 3;
    }
    else if (buttonsPinValue > 535)
    {
        // button 2 has a value of about 559
        pressedButton = 2;
    }
    else if (buttonsPinValue > 492)
    {
        // button 1 has a value of about 512
        pressedButton = 1;
    }
    else if (buttonsPinValue > 450)
    {
        // if no button is pressed the value is of about 473
        pressedButton = 0;
    }
    else if (buttonsPinValue > 400)
    {
        // button 8 has a value of about 427
        pressedButton = 11;
    }
    else if (buttonsPinValue > 340)
    {
        // button 10 has a value of about 372
        pressedButton = 10;
    }
    else if (buttonsPinValue > 267)
    {
        // button 9 has a value of about 307
        pressedButton = 9;
    }
    else if (buttonsPinValue > 178)
    {
        // button 8 has a value of about 228
        pressedButton = 8;
    }
    else if (buttonsPinValue > 0)
    {
        // button 7 has a value of about 128
        pressedButton = 7;
    }
    return pressedButton;
}


Damit wäre das Projekt "Arduino MP3-Player" abgeschlossen. Die SD-Karte kann mit Tracks entsprechend der vorgesehenen Struktur befüllt werden, die dann über den Arduino abgespielt werden können. Allerdings kann das Befüllen und das Verwalten der Tracks noch über eine PC-Software vereinfacht werden. Näheres dazu aber das nächste Mal.



Weitere Blogeinträge

  1. Auswahl der Komponenten
  2. Das Entwicklungsbrett
  3. Das erste Einschalten
  4. Die Entwicklungsumgebung
  5. Knöpfe (digital)
  6. Mehrere Knöpfe (digital)
  7. Mehrere Knöpfe (analog)
  8. Potentiometer
  9. Das MP3 Shield
  10. Auswahl der Komponenten 2
  11. Auswahl der Komponenten (Zusammenfassung) 
  12. Punkt-Streifenrasterplatine und Knöpfe
  13. Punkt-Streifenrasterplatine und weitere Komponenten
  14. Das Gehäuse
  15. Sketch 1 (setup-Methode)
  16. Sketch 2 (loop-Methode)
  17. Sketch 3 (Der komplette Code)
  18. PC-Software