CODEWITHSUNDEEP
wpfvb.netxamlwindows-phone-8
Prince Pandey
Prince Pandey

Reputation: 105

how to change border background when textblock text changes

i have a bound textblock(say mre than 6) in longlistselector following with a border. the border apply for all textblocks. here is the bound code:

Public Sub LoadData()
    ' Sample data; replace with real data
    Me.Items.Add(New ItemViewModel() With {.LineTwo = "New Endowment Plans", .LineThree = ""})
    Me.imgsource.Add(New ItemViewModel() With {.imgsource = "/Images/endow_1.jpg"})
    Me.Items.Add(New ItemViewModel() With {.LineTwo = "New Money Back Plans", .LineThree = ""})
    Me.Items.Add(New ItemViewModel() With {.LineTwo = "Single Premium Plans"})
    Me.Items.Add(New ItemViewModel() With {.LineTwo = "New Term", .LineThree = "Plans"})
    Me.Items.Add(New ItemViewModel() With {.LineTwo = "New Health", .LineThree = "Plans"})
    Me.Items.Add(New ItemViewModel() With {.LineTwo = "New Pension", .LineThree = "Plans"})
    Me.Items.Add(New ItemViewModel() With {.LineTwo = "Withdrawl", .LineThree = "Plans"})
    Me.Items.Add(New ItemViewModel() With {.LineTwo = "Plans", .LineThree = "Information"})
End Sub

and here is xaml code:

<phone:LongListSelector>
    <phone:LongListSelector.ItemTemplate>
        <DataTemplate>
            <StackPanel  Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432" Tap="StackPanel_Tap">
                <Border x:Name="planImage" BorderThickness="5" Width="99" Height="99" BorderBrush="#FFFFC700">
                    <Border.Background>
                        <ImageBrush ImageSource="/Images/liclogo.jpg" Stretch="Fill"/>
                    </Border.Background>
                </Border>
                <StackPanel Width="311" Margin="8,-7,0,0">
                    <TextBlock x:Name="Plantype" Foreground="#FF8FF01B" Text="{Binding LineTwo }"  TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
                    <TextBlock Foreground="#FF8FF01B" Text="{Binding LineThree }" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

i want to change each border background images because one i was using reflected same in all textblocks.

Upvotes: 0

Views: 190

Answers (1)

George Nikolaides
George Nikolaides

Reputation: 1386

If I understood correctly what you would like here is to have a different image for each item in your list.

There are two ways to achieve that.

Option 1: Add a new property (Like you have LineTwo and LineThree) with name ImagePath for example and add the image path for each item separately and then change code to:

<Border.Background>
    <ImageBrush ImageSource="{Binding ImagePath}" Stretch="Fill"/>
</Border.Background>

Option 2: Create a converter and bind it to the image source of your Image element. Examples: Image Example here Visibility Example here Microsoft's getting started example here

I think the best solution for your case is to use Option 1. Straight forward and does not need any additional processing. However this would require for you to have that extra field with the path which one could disagree about since it keep a lot of "useless" information for static image paths and would recommend going with Option 2!

Upvotes: 1

Related Questions