CODEWITHSUNDEEP
silverlightwindows-phone-7
Beetlejuice
Beetlejuice

Reputation: 4425

Buttons in ListBox

I'm doing a list in my project, that needs a button for each item.

How can I get those buttons in ListBox, like in the page "Last calls" of my windows phone?

Thanks.

Upvotes: 0

Views: 106

Answers (4)

Toni Petrina
Toni Petrina

Reputation: 7122

The easiest way to get round buttons is to user Coding4Fun. It is free to use and very simple to install.

You can follow these instructions to use it in your application.

As for the icons, you can either search around for some free packs or you can see if Metro Studio 2 has the icon you need. That tool is also free to use.

Upvotes: 0

grv_9098
grv_9098

Reputation: 465

FunksMaName answer is very much correct except a Small change.....

<ListBox Height="360"
          HorizontalAlignment="Left"
          Margin="22,23,0,0"
          Name="UserDetailsListBox"
          VerticalAlignment="Top"
          Width="413">  <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                 <Button.Template>
                        <ControlTemplate>
                          <Image Source="/Assets/Images/MyImage.png" />
                        </ControlTemplate>
                    </Button.Template>
               <TextBlock x:Name="txtOverViewHeader1"
                          Text="OverView"
                          Foreground="Yellow"
                          Width="600"
                          FontSize="28"
                          Margin="10,0,0,0"
                          Height="65">
                </TextBlock>
             </StackPanel>
        </DataTemplate></ListBox.ItemTemplate></ListBox>

i just moved image inside button's template instead of content ... That is more accurate..

Upvotes: 2

FunksMaName
FunksMaName

Reputation: 2121

Use a circular image, and set the Tap event, or wrap your image around a Button template if you need a buttons specific behavior

<ListBox Height="360"
              HorizontalAlignment="Left"
              Margin="22,23,0,0"
              Name="UserDetailsListBox"
              VerticalAlignment="Top"
              Width="413"> 
 <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Button Template="x:Null" Tap="">
                        <Image Source="/Assets/Images/MyImage.png" />
                    </Button>
                   <TextBlock x:Name="txtOverViewHeader1"
                              Text="OverView"
                              Foreground="Yellow"
                              Width="600"
                              FontSize="28"
                              Margin="10,0,0,0"
                              Height="65">
                    </TextBlock>
                 </StackPanel>
            </DataTemplate>
</ListBox.ItemTemplate>

</ListBox>

Upvotes: 0

Debashrita
Debashrita

Reputation: 940

We may add button for each item of the Listbox like this.

<ListBox Height="360"
                  HorizontalAlignment="Left"
                  Margin="22,23,0,0"
                  Name="UserDetailsListBox"
                  VerticalAlignment="Top"
                  Width="413">
 <ListBox.ItemTemplate>
                <DataTemplate>
                   <StackPanel Orientation="Vertical"
                               >
    <StackPanel Orientation="Horizontal">
                        <Button Width="150" Height="50" x:Name="Btn1" Content="Button1"                                 Margin="0,-20,0,0"/>
                       <TextBlock x:Name="txtOverViewHeader1"
                                  Text="OverView"
                                  Foreground="Yellow"
                                  Width="600"
                                  FontSize="28"
                                  Margin="10,0,0,0"
                                  Height="65">
                        </TextBlock>
                     </StackPanel>

             <StackPanel Orientation="Horizontal">
                        <Button Width="150" Height="50" x:Name="Btn2" Content="Button2"                                 Margin="0,-20,0,0"/>
                       <TextBlock x:Name="txtOverViewHeader2"
                                  Text="OverView"
                                  Foreground="Yellow"
                                  Width="600"
                                  FontSize="28"
                                  Margin="10,0,0,0"
                                  Height="65">
                        </TextBlock>
                     </StackPanel>

                </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>

                </ListBox>

Hope it will give you the desired answer

Upvotes: 1

Related Questions