如何在文本块文本更改时更改边框背景
how to change border background when textblock text changes
我在 longlistselector 中有一个绑定的文本块(比如超过 6 个),后面有一个边框。边框适用于所有文本块。这是绑定代码:
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
这里是 xaml 代码:
<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>
我想更改每个边框背景图片,因为我使用的一张在所有文本块中都反映相同。
如果我理解正确的话,你希望这里的列表中的每个项目都有不同的图像。
有两种方法可以实现。
选项 1:
例如添加一个名称为 ImagePath
的新 属性(就像您有 LineTwo 和 LineThree),并分别为每个项目添加图像路径,然后将代码更改为:
<Border.Background>
<ImageBrush ImageSource="{Binding ImagePath}" Stretch="Fill"/>
</Border.Background>
选项 2:
创建一个转换器并将其绑定到 Image
元素的图像源。
例子:
图片示例 here
可见性示例 here
Microsoft 的入门示例 here
我认为最适合您的情况的解决方案是使用选项 1。直截了当,不需要任何额外的处理。但是,这将需要您拥有一个额外的字段,其中包含人们可能不同意的路径,因为它为静态图像路径保留了大量 "useless" 信息,并建议使用 Option 2!
我在 longlistselector 中有一个绑定的文本块(比如超过 6 个),后面有一个边框。边框适用于所有文本块。这是绑定代码:
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
这里是 xaml 代码:
<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>
我想更改每个边框背景图片,因为我使用的一张在所有文本块中都反映相同。
如果我理解正确的话,你希望这里的列表中的每个项目都有不同的图像。
有两种方法可以实现。
选项 1:
例如添加一个名称为 ImagePath
的新 属性(就像您有 LineTwo 和 LineThree),并分别为每个项目添加图像路径,然后将代码更改为:
<Border.Background>
<ImageBrush ImageSource="{Binding ImagePath}" Stretch="Fill"/>
</Border.Background>
选项 2:
创建一个转换器并将其绑定到 Image
元素的图像源。
例子:
图片示例 here
可见性示例 here
Microsoft 的入门示例 here
我认为最适合您的情况的解决方案是使用选项 1。直截了当,不需要任何额外的处理。但是,这将需要您拥有一个额外的字段,其中包含人们可能不同意的路径,因为它为静态图像路径保留了大量 "useless" 信息,并建议使用 Option 2!