Build UserControl to display both text and image dynamically - c#

I am building a quiz redistributable desktop application. Questions can be text or image or both.
Someone suggested i build a text and image dynamic user control to display the questions. I have searched all round but cant find any tutorial that shows how to build such user control.
i was reffered to http://www.akadia.com/services/dotnet_user_controls.html,
http://en.csharp-online.net/Create_List_Controls,https://msdn.microsoft.com/en-us/library/aa302342.aspx
but it dosent help

As I can understand you need some control that can display a dynamic content (text/image). I can suggest you to use the content control that selects its content DataTemplate according to it's current data context.
I'will put a whole solution in several minutes.
<ContentControl Content="{Binding CurrentControlContent.Content}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type soSandBoxListView:SingleTextModel}">
<TextBlock Text="{Binding SingleModelContent}" Background="Tan"></TextBlock>
</DataTemplate>
<DataTemplate DataType="{x:Type soSandBoxListView:MultipleTextModel}">
<StackPanel>
<TextBlock Text="{Binding FirstName}" Background="Yellow"></TextBlock>
<TextBlock Text="{Binding LastName}" Background="Red"></TextBlock>
<!--use the binding to your picture presentation in model-->
<Image Source="Resources/yotveta.jpg" Stretch="None"></Image>
</StackPanel>
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
Regards

Related

How to have multiple datatemplates in UWP ListView (x:bind)

I'm stuck with my UWP app, I'm trying to follow MVVM principle with {x:bind} instead of the older WPF way {binding name}
But I'm stuck with my idea/development, I'm trying insert multiple DataTemplates within ListView (or GridView).
I want to do something like this as an example:
<ListView.ItemTemplate>
<DataTemplate x:DataType="localModels:Cars">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Vertical">
<TextBlock Text="Name:" />
<TextBox Text="{x:Bind Name}" />
</StackPanel>
</StackPanel>
</DataTemplate>
<!-- Here is the second DataTemplate which isn't allowed in UWP -->
<DataTemplate x:DataType="localModels:Bikes">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Vertical">
<TextBlock Text="Name:" />
<TextBox Text="{x:Bind Name}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
As you can see, I have 2 DataTemplate: Cars and Bikes inside ListView.ItemTemplate.
Not sure if this is relevant: Cars.cs is inheriting from Bike.cs parent.
I don't really get why UWP doesn't accept more than 1 DataTemplate within ListView.ItemTemplate. Because I really want my ListView to show as many kind of data as possible.
What's the way to solve this issue in UWP and {x:bind}?
You can use a DataTemplateSelector to determine which datatemplate should be selected based on your data type. Here you can find an example.

Binding textblock text from resources wpf

<Grid.Resources>
<DataTemplate x:Key="trackTemplateY">
<TextBlock x:Name="txbValueY" Text="{Binding ValueX}" Margin="5" FontSize="11" FontWeight="Medium"/>
</DataTemplate>
</Grid.Resources>
<TextBlock Text="{Binding ElementName=txbValueY,Mode=OneWay,Path=Text}"
Background="Orange" Foreground="White"/>
I try this above code but i cant to bind the text, how can i bind inside resources textblock text to outside the resources, Thanks
I am guessing that you are trying to show Text present in TextBlock resource in your second non-resource TextBlock.
You don't need DataTemplate. As you will progress ahead in WPF journey, you will come to know about those.
Below code will show "Resource Text" in your second TextBlock.
<Grid.Resources>
<TextBlock x:Key="TbRes1" Text="Resource Text" x:Name="txbValueY" Margin="5" FontSize="11" FontWeight="Medium"/>
</Grid.Resources>
<TextBlock Text="{Binding Source={StaticResource TbRes1},Mode=OneWay,Path=Text}"
Background="Orange" Foreground="White"/>
All sorts of problems here:
You're specifying Mode.TwoWay in your TextBlock Text binding, it should be Mode.OneWay.
You're binding to the Label's Text property. Label doesn't have a Text property, only Content. And it's not a dependency property so you can't bind to it. (That said, a fluke of the internal mechanics does cause it to appear to work under certain conditions).
A template is exactly that: a template. You can't bind to something that doesn't exist, so the binding is meaningless.
Maybe you could clarify exactly what it is you're trying to do so we can suggest an alternative way of achieving it? Specifically, show us exactly how you're instantiating that DataTemplate.
UPDATE:
You need the first textbox to be created in order for the second one to bind to it, simply declaring it inside a DataTemplate doesn't cause that to happen by itself, so the direct binding will fail. Binding UI elements together like this should generally be avoided though, why can't you simply give the second textbox the same binding as the first?
<Grid>
<Grid.Resources>
<DataTemplate x:Key="trackTemplateY">
<TextBlock x:Name="txbValueY" Text="{Binding ValueX}" Margin="5" FontSize="11" FontWeight="Medium"/>
</DataTemplate>
</Grid.Resources>
<TextBlock Text="{Binding ValueX}" Background="Orange" Foreground="White"/>
</Grid>
If for some reason this isn't possible then you can also create a binding proxy object (see this page for details):
<Grid>
<Grid.Resources>
<local:BindingProxy x:Key="proxy" Data="{Binding ValueX}" />
<DataTemplate x:Key="trackTemplateY">
<TextBlock x:Name="txbValueY" Text="{Binding ValueX}" Margin="5" FontSize="11" FontWeight="Medium"/>
</DataTemplate>
</Grid.Resources>
<TextBlock Text="{Binding Source={StaticResource ResourceKey=proxy}, Path=Data}" Background="Orange" Foreground="White"/>
</Grid>
Again, there are ways to bind to the data template declaration if you really want to, but to do that I'd have to see details of how your data template is being created at runtime.

Binding text with viewbox produces unwanted behaviour

The appeareance of my button is perfect if I define what the text is.
Working Image
<StackPanel Orientation="Horizontal">
<ContentControl ContentTemplate="{StaticResource Icons.Person}" Style="{StaticResource Icon}"/>
<TextBlock Text="PERSONS"/>
</StackPanel>
I want to set the text to be Binding to a variable but this Overlaps the image.
Appearance after Bindings
<StackPanel Orientation="Horizontal">
<ContentControl ContentTemplate="{StaticResource Icons.Person}" Style="{StaticResource Icon}"/>
<TextBlock Text="{Binding Persons"/>
</StackPanel>
Icon.xaml
<DataTemplate x:Key="Icons.Person">
<Viewbox>
<Path ......./>
</Viewbox>
</DataTemplate>
Path code is huge, if it's needed I'll upload it.
What I've tried is changing the Datatemplate to be only a ViewBox with a key, and change content control to be a stackpanel with a viewbox within it and the text box. Same effect would happen. May I ask how to fix this or what's an alternative to show my datatemplate/viewbox with a binding text field

WPF TreeView with icons and text

Working on learning WPF by converting my win forms apps. Currently having a hard time figuring out how to add TreeViewItems to a TreeView that contains am image before text all on the same line. My images are png files that are listed as a resource.
I want to be able to specify the image and text of each item. Everything I have been seeing are setting default images.
Would really appreciate the help.
Thanks
Try something like this:
<TreeView ItemsSource="{Binding SomeData}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Icon}" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
See this for how to bind the image in more detail:
Binding image source through property in wpf

Show/hide content on the WP7 pushpin

I have a puspin ContentTemplate:
<my:Pushpin.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding Text1}"/>
<TextBlock Text="{Binding Text2}"/>
</DataTemplate>
</my:Pushpin.ContentTemplate>
How could I show and hide it clickking on the pushpin (Could be a lot of pushpins on the map and I need to show the content of the clicked one)?
You are already binding text to your Pushpin. You can bind visibility to it as well. I am assuming here that each Pushpin is binding to a seperate object.
<my:Pushpin.ContentTemplate>
<DataTemplate>
<Grid Visibility="{Binding IsSelected, Converter={StaticResource BoolToVisibilityConverter}">
<TextBlock Text="{Binding Text1}"/>
<TextBlock Text="{Binding Text2}"/>
</Grid>
</DataTemplate>
</my:Pushpin.ContentTemplate>
If you don't know how to use converters, then you can search for them and find all kinds of answers that should be helpful. I'll include one here for convenience

Categories