|
|
|
|
|
Hier stehen Informationen zum Umgang mit dem Bild-Steuerelement (Picture). Die zugehörige Klasse lautet: CStatic. Wenn man von Anfang an weiss welches Bild bzw Bilder angezeigt werden sollen, dann kann man sie als Ressourcen einbinden. Die Bilder werden dann in die .exe Datei integriert, wie es im Beispiel Bild anzeigen oder Wechselnde Bilder anzeigen der Fall ist. Man kann aber ein Bild auch erst zur Laufzeit laden, wie das Beispiel Bild während der Laufzeit auswählen zeigt. Alle folgenden Beispiele ermöglichen nur das Anzeigen von .bmp-Dateien!
- Bild anzeigen
- Bild mit einem Hyperlink ausstatten
- Bild während der Laufzeit auswählen
- MouseOver-Buttons einfügen
- Nachrichten für das Bild-Steuerelement
- Seperator mit dem Bild-Steuerelement erstellen
- Wechselnde Bilder anzeigen
Im folgenden Beispiel wird gezeigt, wie man mit Hilfe des Bild-Steuerelement ein Bild im .bmp-Format anzeigen kann. Dazu muss man nicht mal Code von Hand einfügen.
Beispiel:
- Erstelle eine Dialogfeldbasierte Anwendung mit dem Namen: Bild und entferne alle vorhandenen Elemente
- Wähle aus der Steuerelementliste das Bild-Steuerelement und platziere es auf dem Dialog
- Importiere ein Bild im .bmp-Format. Lade dir das Bild aus dem Beispiel Hier! runter (auch unter Downloads) oder suche z.B. unter C:\Windows nach einer .bmp-Datei. Behalte die vorgegebene ID (IDB_BITMAP1)
- Gehe in die Eigenschaften des Bild-Steuerelement und stelle unter Typ (Type): Bitmap und unter Abbild (Image) das importierte Bitmap ein (IDB_BITMAP1)
Downloads: Bild.exe - Gesamtes Projekt - Bitmap aus dem Beispiel
Man kann ganz leicht ein Link in ein Bild integrieren. Dazu eignet sich die BN_CLICKED-Nachricht des Bild-Steuerelement. Wir werden jetzt eine kleine Anwendung erstellen, die ein Bild anzeigt und bei einem Klick mit der linken Maustaste die Verbindung mit dem Internet herstellt.
Beispiel:
- Erstelle eine Dialogfeldbasierte Anwendung mit dem Namen: HyperlinkBild und entferne alle vorhandenen Elemente
- Wähle aus der Steuerelementliste das Bild-Steuerelement, platziere es auf dem Dialog und ändere die ID in IDC_BILD
- Importiere ein Bild im .bmp-Format. Lade dir das Bild aus dem Beispiel Hier! runter (auch unter Downloads) oder suche z.B. unter C:\Windows nach einer .bmp-Datei. Behalte die vorgegebene ID (IDB_BITMAP1)
- Gehe in die Eigenschaften des Bild-Steuerelement und stelle unter Typ (Type): Bitmap und unter Abbild (Image) das importierte Bitmap ein (IDB_BITMAP1). Aktiviere ausserdem noch Benachrichtigen (Notify)
- Füge für die Dialogklasse (CHyperlinkBildDlg) eine Nachrichtenbehandlungsroutine für die BN_CLICKED (bzw. STN_CLICKED)-Nachricht ein und füge folgenden Code in die eben erstellte Funktion ein:
void CHyperlinkBildDlg::OnBild()
{
ShellExecute (NULL, "open", "iexplore", "www.coding-help.de", NULL, SW_SHOWNORMAL);
}
Beschreibung:
Bei einem Klick auf das Bild wird mit Hilfe der Funktion ShellExecute() der Internet Explorer gestartet und die angegebene Seite geladen. Das funktioniert aber nur, wenn in den Eigenschaften Benachrichtigen (engl. Notify) aktiviert ist.
Verbesserung der Anwendung
Das Beispiel ist noch etwas unvollständig. Man kann nicht erkennen das sich hinter dem Bild ein Link verbirgt. Aus diesem Grund fügen wir der Anwendung die Funktion PreTranslateMessage() hinzu, in der wir den Mauszeiger ändern sobald er sich über dem Bild befindet.
- Lade dir das Hand-Icon aus dem Beispiel Hier! runter und speichere die Datei in dem res-Verzeichnis deines Projekts. Sie wird gleich benötigt, damit wir den Mauszeiger in eine Hand umwandeln können, sobald dieser sich über der Grafik befindet.
- Importiere die Datei als Icon und behalte die vorgegebenen ID (IDC_CURSOR1)
- Füge eine Nachrichtenbehandlungsroutine in die Dialogklasse (CHyperlinkBildDlg) für die Nachricht PreTranslateMessage ein und füge folgenden Code ein:
BOOL CHyperlinkBildDlg::PreTranslateMessage(MSG* pMsg)
{
if(pMsg->message == WM_MOUSEMOVE)
{
// Befindet sich der Mauszeiger über unserem Bild?
if(pMsg->hwnd == GetDlgItem(IDC_BILD)->m_hWnd)
{
// Handle für anderen Cursor erzeugen
HCURSOR lhCursor;
// Hand Cursor laden
lhCursor = AfxGetApp()->LoadCursor(IDC_CURSOR1);
// Bildschirmcursor setzen
SetCursor(lhCursor);
}
}
return CDialog::PreTranslateMessage(pMsg);
}
Beschreibung:
Wir fangen die Nachricht WM_MOUSEMOVE ab und prüfen dann, ob sich der Mauszeiger über unserem Bild befindet. Sobald dies der Fall ist, zeigen wir einen anderen Cursor an und damit ist sofort ersichtlich das es sich um einen Link handelt.
Man könnte auch einfach einen Standardcursor laden, um den Mauszeiger zu verändern, z.B so:
hCursor = AfxGetApp()->LoadStandardCursor(IDC_CROSS);
Downloads: Hyperlink.exe - Gesamtes Projekt - Bitmap aus dem Beispiel - Hand-Icon
Im folgenden Beispiel wird gezeigt, wie man ein Bild während der Laufzeit auswählen und anzeigen kann.
Beispiel:
- Erstelle eine Dialogfeldbasierte Anwendung mit dem Namen: LaufzeitBild und entferne alle vorhandenen Elemente
- Wähle aus der Steuerelementliste das Bild-Steuerelement, platziere es auf dem Dialog und ändere die ID in IDC_BILD
- Gehe in die Eigenschaften des Bild-Steuerelement und stelle unter Typ (Type): Bitmap ein
- Füge eine Member-Variable für das Picture-Steuerelement ein - Kategorie: Control, Variablentyp: CStatic, Name: m_ctlBild
- Füge jetzt noch einen Button in die Anwendung ein und ändere den Titel in Bild auswählen
- Klicke doppelt auf den Button, um eine Member-Funktion für die BN_CLICKED-Nachricht einzufügen
void CLaufzeitBildDlg::OnButton1()
{
// Benötigte Variablen erstellen
CFileDialog m_File(TRUE, NULL, NULL, OFN_HIDEREADONLY | OFN_OVERWRITEPROMPT, "Bilder (*.bmp)|*.bmp;||");
CString str_filename;
char Zeichen;
// File Dialog öffnen und Ergebnis auffangen
if(m_File.DoModal()==IDOK)
{
// Gewählten Dateinamen ermitteln
str_filename=m_File.GetPathName();
// Länge des Dateinamens ermitteln
int laenge=str_filename.GetLength();
// Alle \ mit \\ ersetzen
for(int i = 0; i < laenge; i++)
{
Zeichen = str_filename.GetAt(i);
if(Zeichen=='\\')
{
str_filename.Insert(i, "\\");
i+=1;
}
}
// Bild anzeigen
m_ctlBild.SetBitmap((HBITMAP)LoadImage(NULL, str_filename, IMAGE_BITMAP, 100 , 100, LR_LOADFROMFILE | LR_CREATEDIBSECTION ));
}
}
Beschreibung:
Da wir auf diese Art sowieso nur .bmp-Dateien anzeigen können, wird dies auch gleich am Anfang in Form eines Dateifilters festgelegt:
CFileDialog m_File(TRUE, NULL, NULL, OFN_HIDEREADONLY | OFN_OVERWRITEPROMPT, "Bilder (*.bmp)|*.bmp;||");
So kommen wir gar nicht erst auf die Idee etwas anderes anzeigen lassen zu wollen. Nachdem alle nötigen Variablen erstellt wurden, wird der Dialog zum Auswählen des Bildes aufgerufen. Wenn dies geschehen ist wird der ausgewählte Dateiname mit dem zugehörigen Pfad ausgelesen. Angenommen es wurde ein Bild auf Laufwerk C im Windows Ordner ausgewählt, so sieht der ausgelesene Pfad etwa so aus: C:\Windows\Bildname.bmp. Wir müssen der Funktion LoadImage() aber den Pfad in dieser Form übergeben: C:\\Windows\\Bildname.bmp. Aus diesem Grund suchen wir nach einem einfachen '\' Zeichen und ersetzen es mit '\\'. Danach kann das Bild angezeigt werden. Dazu haben wir die Funktion LoadImage() verwendet und ihr den ermittelten Dateipfad übergeben (2. Parameter) sowie die Grösse des Bildes auf 100*100 Pixel begrenzt (4. und 5. Parameter).
Downloads: LaufzeitBild.exe - Gesamtes Projekt
Der MouseOver Effekt wird dadurch erreicht, das in einem Bild-Steuerelement ein Button als Bitmap angezeigt wird und mit einem anderen Bitmap ausgetauscht wird, sobald die Maus das angezeigt Bitmap berührt.
Dieses Thema habe ich schon unter Buttons aufgeführt. Hier der Link dazu: MouseOver-Buttons
Man kann über den Klassen-Assistenten im Register Nachrichtenzuordnungstabellen eine Funktion (Nachrichtenbehandlungsroutine) für die Nachricht BN_CLICKED (bei Visual C++ 2003.NET heisst die Nachricht: STN_CLICKED) erstellen. Wird dann über dem Bild-Element die linke Maustaste gedrückt, wird der angegebene Code ausgeführt. Man kann z.B eine Internetseite laden oder sonstigen Code ausführen.
Ein Beispiel dazu gibt es hier: Bild mit einem Hyperlink ausstatten
Man kann das Bild-Steuerelement etwas zweckentfremden und eine Art Seperator erstellen. Das sind Linien, die z.B in Menüs verwendet werden, um eine optische Trennung hervorzurufen. Damit kann man seine Anwendung etwas verschönern oder eben eine optische Trennung verschiedener Themen herbeirufen.
Füge dazu einfach ein Bild-Steuerelement in eine Anwendung ein und gehe in dessen Eigenschaften. Stelle als Typ Rahmen (bei VC2003: Etched Horz) und als Farbe Geätzt (Etched) ein. Jetzt musst du nur noch die Höhe des Bild-Steuerelement verringern, so das eine Linie (unser Seperator) entsteht. Das sieht dann so aus:
Downloads: Seperator.exe - Gesamtes Projekt
Im folgenden Beispiel wird gezeigt, wie man mit Hilfe des Bild-Steuerelement per Klick auf einen Button das angezeigte Bild mit einem anderen austauschen kann. Auch das funktioniert mit dieser Vorgehensweise nur mit Bilder im .bmp-Format.
Beispiel:
- Erstelle eine Dialogfeldbasierte Anwendung mit dem Namen: WechselBild und entferne alle vorhandenen Elemente
- Wähle aus der Steuerelementliste das Bild-Steuerelement, platziere es auf dem Dialog und ändere die ID in IDC_BILD
- Importiere zwei Bilder im .bmp-Format. Lade dir z.B die Bilder aus dem Beispiel Hier! runter (auch unter Downloads) oder suche z.B. in C:\Windows nach .bmp-Dateien. Behalte die vorgegebenen IDs (IDB_BITMAP1, IDB_BITMAP2)
- Gehe in die Eigenschaften des Bild-Steuerelement und stelle unter Typ (Type): Bitmap und unter Abbild (Image) das erste importierte Bitmap ein (IDB_BITMAP1).
- Füge eine Member-Variable für das Picture-Steuerelement ein - Kategorie: Control, Variablentyp: CStatic, Name: m_ctlBild
- Füge zwei Variablen für die Dialogklasse (CWechselBildDlg) ein. Variablentyp: int, Variablenname: n_Merker, Zugriffstatus: Public und als zweite Variable: Variablentyp: CBitmap, Variablenname: m_Bitmap, Zugriffstatus: Public
- Füge noch einen Button in die Anwendung ein und ändere den Titel in: Bild wechseln
- Klicke doppelt auf den Button, um eine Member-Funktion für die BN_CLICKED-Nachricht einzufügen
- Füge nun folgenden Code in die eben erstellte Funktion ein:
void CWechselBildDlg::OnButton1()
{
if(n_Merker==0)
{
// Gespeichertes Bild aus Variable löschen
m_Bitmap.DeleteObject();
// Variable neues Bild zuweisen
m_Bitmap.LoadBitmap(IDB_BITMAP2);
// Dem Bild-Element das geladene Bild zuweisen
m_ctlBild.SetBitmap(m_Bitmap);
// Merker setzen
n_Merker=1;
}
else if(n_Merker==1)
{
// Gespeichertes Bild aus Variable löschen
m_Bitmap.DeleteObject();
// Variable neues Bild zuweisen
m_Bitmap.LoadBitmap(IDB_BITMAP1);
// Dem Bild-Element das geladene Bild zuweisen
m_ctlBild.SetBitmap(m_Bitmap);
// Merker setzen
n_Merker=0;
}
}
- Füge jetzt noch folgenden Code in die OnInitDialog() Funktion ein, um den Merker zu initialisieren
BOOL CBild2Dlg::OnInitDialog()
{
...
// ZU ERLEDIGEN: Hier zusätzliche Initialisierung einfügen
n_Merker=0;
return TRUE
}
Downloads: WechselBild.exe - Gesamtes Projekt - Bitmaps aus dem Beispiel
|
Die Vervielfältigung der auf diesen Seiten enthaltenen Informationen und Grafiken ist untersagt, ausgenommen davon ist sämtlicher auf diesen Seiten angezeigter Quellcode. Es wird keinerlei Gewähr für die Richtigkeit und Vollständigkeit der bereitgestellten Informationen übernommen. Haftungsansprüche für Schäden, die durch Nutzung der bereitgestellten Informationen verursacht wurden, sind ausgeschlossen. Für den Inhalt von angegebenen Verweisen wird keine Gewährleistung übernommen.
Copyright © 2005 coding-help.de | |
