In WPF I want to show a control in a way that it should follow the contents of a dynamic Binding textblock. The xaml structre I used is:
<StackPanel Orientation="Vertical" >
<DockPanel Margin="2,3">
<StackPanel Orientation="Horizontal" DockPanel.Dock="Right"> //right side control here
<Button Tag="{Binding}" Style="{StaticResource ResourceKey=dbokLinkStyle}" Content="delete">
</Button>
</StackPanel>
<WrapPanel Orientation="Horizontal">
<TextBlock TextTrimming="WordEllipsis" TextWrapping="Wrap" Text="{Binding Quote}" FontWeight="Bold" FontSize="16"
VerticalAlignment="Center" ></TextBlock>
<Button Tag="{Binding}">
<StackPanel>
<TextBlock Text="Page"/>
</StackPanel>
</Button>
</WrapPanel>
</DockPanel>
<StackPanel Orientation="Horizontal">
Row 2 controls..
</StackPanel>
I want to show Page Button immediatly after the Textblock with binding Quotes. But the above xaml makes it always on right corner only. So how can I make it to follow the textblock control.
The layout is more like
Replace your WrapPanel with something like this:-
<TextBlock TextWrapping="Wrap">
<TextBlock TextTrimming="WordEllipsis" Text="{Binding Foo}" FontWeight="Bold" FontSize="16" VerticalAlignment="Center" />
<Button Content="Page" />
</TextBlock>
The entire TextBlock will wrap as its contents (i.e. the inner TextBlock and Button) get too long.
Related
Newbie here.
I'm writing a code to create information for different users. I want the stackpanels to be generated automatically.
For example if 5 user enters his/her details in the ui and click on the add button, 5 stackpanel with the users info,should be generated automatically for each users. Please what wpfcontrol can I use for this functionality? Thanks all.
<StackPanel >
<StackPanel Orientation="Horizontal" Height="32">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Margin="0,6,5,0"
Text="First Name" VerticalAlignment="Top"/>
<TextBox Name="firstname" TextWrapping="Wrap" Text="" Margin="0,0,0,9" Width="71"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="49" RenderTransformOrigin="0.502,1.031">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Margin="0,6,5,0"
Text="Last Name" VerticalAlignment="Top"/>
<TextBox Name="lastname" TextWrapping="Wrap" Text="" Margin="0,0,0,26" Width="71" TextChanged="TextBox_TextChanged"/>
</StackPanel>
</StackPanel>
<StackPanel VerticalAlignment="Bottom" Margin="10,10,0,0" FlowDirection="LeftToRight" Orientation="Horizontal" Grid.Row="1">
<Button x:Name="Btn_add" Content="Add" Click="Btn_add_Click"
HorizontalAlignment="Center" VerticalAlignment="Top" Width="44"/>
<StackPanel Margin="10">
<WrapPanel Margin="0,10">
<TextBlock Text="Full Name: " FontWeight="Bold" />
<TextBlock Text="{Binding Path=Text, ElementName=lastname}" />
<TextBlock Text="{Binding Path=Text, ElementName=firstname}" />
</WrapPanel>
</StackPanel>
</StackPanel>
You could create a UserControl that contains your StackPanel and of its content. You would then be able to instantiate that UserControl on-the-fly whenever you want it. See Creating & using a UserControl for a tutorial on WPF UserControl.
I'm trying to experiment with WPF, so I created some test window to see how it goes and I encountered a little behavior I did not expect with the HorizontalAlignment property.
First of all the screen looks like this:
The problem is, that in the bottom row of the marked grid, I wanted to have the left textBlock and CheckBox aligned to the left, the center textBlock and DatePicker aligned to the center and the same with the right. As you can see in the picture earlier, it doesn't really happen.
The XAML for this grid row:
<StackPanel Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" Margin="10">Filter By Date</TextBlock>
<CheckBox HorizontalAlignment="Left" Margin="2" Height="18" Width="13"></CheckBox>
<TextBlock HorizontalAlignment="Center" Margin="10">Begin Date</TextBlock>
<DatePicker HorizontalAlignment="Center" Margin="2"> </DatePicker>
<TextBlock HorizontalAlignment="Right" Margin="10">End Date</TextBlock>
<DatePicker HorizontalAlignment="Right" Margin="2"></DatePicker>
</StackPanel>
How do i make them be closer to the edges and center and not just one after another like I guess is the automatic StackPanel's layout?
Horizontal StackPanel will ignore HorizontalAlignment of its children but you can use Grid instead with 3 StackPanel aligned left, centre and right:
<Grid Grid.Row="2" Grid.ColumnSpan="2">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<TextBlock Margin="10">Filter By Date</TextBlock>
<CheckBox Margin="2" Height="18" Width="13"></CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Margin="10">Begin Date</TextBlock>
<DatePicker Margin="2"> </DatePicker>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<TextBlock Margin="10">End Date</TextBlock>
<DatePicker Margin="2"></DatePicker>
</StackPanel>
</Grid>
I have a listbox in my windows phone application. In the listbox DataTemplate I placed a button. How can I get the button object in codebehind. I am not getting the reference of the rowButton in the .cs file. I want to change the button background color of button of each row. how can I get the button reference in the code behind ?
I following code I used for listview.
<Grid Height="530" Grid.Row="1" VerticalAlignment="Top" Margin="0,30,0,0">
<ListBox Margin="0,0,0,0" Name="TransactionList">
<ListBox.ItemTemplate>
<DataTemplate>
<Button Width="460" Height="150" Click="user_click" Name="rowButton" >
<Button.Content>
<StackPanel Orientation="Horizontal" Height="auto" Width="400">
<Image Width="80" Height="80" Source="{Binding Type}"></Image>
<StackPanel Orientation="Vertical" Height="150" Margin="20,0,0,0">
<StackPanel Orientation="Horizontal" Height="40">
<TextBlock Width="100" FontSize="22" Text="Name :" Height="40" ></TextBlock>
<TextBlock Width="auto" FontSize="22" Text="{Binding Name}" Height="40" ></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="40">
<TextBlock Width="100" FontSize="22" Text="Date :" Height="40" ></TextBlock>
<TextBlock Width="100" FontSize="22" Text="{Binding Date}" Height="40" ></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="40">
<TextBlock Width="100" FontSize="22" Text="Amount :" Height="40" ></TextBlock>
<TextBlock Width="auto" FontSize="22" Text="{Binding Amount}" Height="40" ></TextBlock>
<TextBlock Width="auto" FontSize="22" Text=" $" Height="40" ></TextBlock>
</StackPanel>
</StackPanel>
</StackPanel>
</Button.Content>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
If you want to change background on user click, in the click event handler use
Button button1 = sender as Button;
button1.Backgorund = new SolidColorBrush(Colors.Red);
to change the background color.
Else bind the background property for each button and change its value on iteration of the items in the listbox.
Without seeing how you've tried to access this is in code it's impossible to say why what you're doing isn't working.
However it'll be much easier if you use databinding to set the color of the templateitem
I have a twitter feed in a list box in a app I'm making for Windows Phone 7. The problem I'm having is that the text of a tweet is being cut off the edge of the list box instead of wrapping around to a new line like this:
The list box is inside a panorama which works fine. This is my code:
<ListBox x:Name="cheapyListBox" Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="400" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Left" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" Tap="Message_OnTap">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="Auto">
<!--<TextBlock Text="{Binding UserName}" FontSize="28" Margin="12,0,0,0" /> -->
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
<TextBlock Text="{Binding Date}" TextWrapping="Wrap" FontSize="20" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How can I get the tweet text to wrap round instead of being cut off? Thank you.
Since your inner StackPanel is nested within a horizontal Stackpanel, it has no constraint of depth, and so the TextBlocks expand infinitely as the text becomes longer.
There are a variety of ways you can fix the issue, but an easy one (if you know the width that you want) is to set the inner StackPanel's width to a finite number.
For example:
<ListBox x:Name="cheapyListBox" Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="400" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Left" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" Tap="Message_OnTap">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="400">
<!--<TextBlock Text="{Binding UserName}" FontSize="28" Margin="12,0,0,0" /> -->
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
<TextBlock Text="{Binding Date}" TextWrapping="Wrap" FontSize="20" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Hope this helps!
The items below show up normally when I do not have them inside the HyperlinkButton.
However, when I add them to the HyperlinkButton, they become invisible.
<DataTemplate>
<HyperlinkButton NavigateUri="/ViewChallenge.aspx">
<HyperlinkButton.Content>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="{Binding Path=Challenge.Image}" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Text="{Binding Path=Challenge.Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<HyperlinkButton NavigateUri="ViewUser.aspx" >
<HyperlinkButton.Content>
<TextBlock Text="{Binding Path=User.Username}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</HyperlinkButton.Content>
</HyperlinkButton>
</StackPanel>
</StackPanel>
</HyperlinkButton.Content>
</HyperlinkButton>
</DataTemplate>
As far as I know, the Hyperlink button only supports text. For example:
<HyperlinkButton Height="100" Width="300">
Hello World
</HyperlinkButton>
Maybe you should use a Button control and set a Control template and enter the XAML you mentioned above inside. It makes more sense in my opinion. Try this:
<ControlTemplate x:Key="MyButtonTemplate" TargetType="Button">
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="100" Width="100" Source="{Binding Path=Challenge.Image}" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Text="{Binding Path=Challenge.Title}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Path=User.Username}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</ControlTemplate>
And simply set the template for your button like so:
<Button x:Name="myButton" Template="{StaticResource MyButtonTemplate}" Click="myButton_Click"/>
And then do the navigation inside the click event.