2010-04-28 19 views
9

Chcę utworzyć przyciski z obrazami i tekstem wewnątrz. Na przykład użyłbym różnych obrazów i tekstu dla przycisków takich jak "Przeglądaj foldery" i "Importuj". Jedną z opcji jest użycie szablonu. miałem przyjrzeć simliar pytanieSzablon przycisku z obrazem i tekstem wpf

Creating an image+text button with a control template?

Ale czy jest jakiś sposób, za pomocą którego mogę związać źródło obrazu bez użycia właściwość zależność lub jakąkolwiek inną klasę?

Dzięki

Odpowiedz

4

Nr Co byś wiążą Image.Source To? Do tego potrzebujesz DependencyProperty. Oczywiście można również zdefiniować normalną klasę, która zawiera dwie właściwości: Text i ImageSource lub Uri, a następnie użyć DataTemplate do renderowania wystąpień tej klasy, ale byłoby to jeszcze więcej kodu do napisania, a to jest trochę "śmierdzące" ".

Jaki jest powód, dla którego nie chcesz używać właściwości zależności lub niestandardowej klasy?

+0

Jedynym powodem jest to, że chciałem wiedzieć, czy istnieje jakaś inna prosta droga, lub możesz powiedzieć raczej "mniej-kodu" sposób to zrobić. Z texblock mogę użyć Chciałem wiedzieć, dlaczego nie mogę zrobić to samo z właściwością Source obrazu? – Archie

+0

Ale ** gdzie ** wstawiłbyś to "TemplateBinding"? I do ** jakiej własności ** chciałbyś związać? – gehho

+0

Czy mogę użyć właściwości "Tag", aby ją powiązać? – Archie

36

To nie musi być takie skomplikowane. Coś tak prostego jak oddanie StackPanel wewnątrz przycisku rade:

<Button> 
    <StackPanel> 
    <TextBlock>My text here</TextBlock> 
    <Image Source="some.jpg" Stretch="None" /> 
    </StackPanel> 
</Button> 

Następnie można skonfigurować StackPanel aby kontrolować, gdzie powinien pojawić się tekst, wyrównanie, itp

+0

OK, ale jak ustawić znak podkreślenia? Jeśli wstawię "_Mój tekst tutaj", renderowanie podkreślenia i alt + M już nie działa. Jak to odzyskasz? – BrainSlugs83

+0

Co zrobić, aby zmniejszyć obraz tak, aby przycisk nie eksplodował do rozmiaru obrazu (np. Jeśli mam obraz o rozmiarze 40x40 i przycisk bez względu na rozmiar przycisków - nie chcę ręcznie ustawić - jak sprawić, aby obraz zmniejszył się do odpowiedniego rozmiaru, zamiast wysadzić mój przycisk, aby był duży? – BrainSlugs83

+0

Chciałbym dodać, że prawdopodobnie będziesz chciał ustawić 'Orientation' w' StackPanel' na 'Horizontal', aby ustawić je obok siebie. Zwróć uwagę, że jeśli używałeś siatki zamiast StackPanel, musiałbyś grać z marginesami, aby wyśrodkować obraz i tekst na przycisku w poziomie (Tak więc do góry jest stackpanel). –

13

dodałem kilka rzeczy wyrównać je ładnie

<Button> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="/ApplicationName;component/Images/MyImage.ico"/> 
     <Label Padding="0">My Button Text</Label> 
    </StackPanel> 
</Button> 
+0

Dobrze, że działało, aby dać mi normalną etykietę przycisku (tj. Z klawiszami skrótowymi alt + letter) - testowałem kliknięcie przycisku po naciśnięciu właściwej kombinacji. - Teraz muszę po prostu dowiedzieć się, jak zmniejszyć obraz do rozmiaru przycisku i nie sprawić, by przyciski były ogromne. – BrainSlugs83

6
<Button> 
     <StackPanel Orientation="Horizontal"> 
      <Image Source="Resources/add.png" Stretch="None" /> 
      <TextBlock Margin="5,0,0,0">Add</TextBlock> 
     </StackPanel> 
    </Button> 
4
<Button x:Name="MyCoolButton"Width="200" Height="75"> 
<Grid > 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
    <Image Source="Pete-Brown-Silverlight-in-Action.png" Margin="5" Grid.Column="0" /> 
    <StackPanel Grid.Column="1" Margin="5"> 
     <TextBlock Text="Buy My Book!" FontWeight="Bold" /> 
     <TextBlock Text="Pete is writing THE Silverlight 4 book" TextWrapping="Wrap" /> 
    </StackPanel> 
</Grid> 

0

Dodano Rozciągnij = "Jednolity" do odpowiedzi Seana na adres, jeśli obraz jest oryginalnie większy niż rozmiar przycisku (problem BrainSlugs83 wspomina w swoich komentarzach, w których również się pojawiłem). Więcej szczegółów na temat opcji rozciągania na MSDN.

<Button> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="/ApplicationName;component/Images/MyImage.ico" Stretch="Uniform"/> 
     <Label Padding="0">My Button Text</Label> 
    </StackPanel> 
</Button> 

chcielibyście dodać to jako komentarz do odpowiedzi pod BrainSlugs83 ale nie można jeszcze z powodu braku punktów i został odrzucony z edycji odpowiedź Seana.

Powiązane problemy