This is my code.
<StackPanel Orientation="Horizontal">
<TextBlock Name="Link1" Text="this is link1"></TextBlock>
<TextBlock Name="Text1" Text=" some text "></TextBlock>
<TextBlock Name="Link2" Text="this is link2"></TextBlock>
<TextBlock Name="Text2" Text=" some other text "></TextBlock>
<TextBlock Name="Link3" Text="this is link3></TextBlock>
</StackPanel>
Now this StackPanel will go out of the screen. I want to wrap the contents of this to go into next line on screen end.
I am not using <Run> property of TextBlock for defining all this because I want to register Tap event for TextBlocks defined as Links in above code. Using Buttons and Hyperlinks is also not desired here. Also with Buttons I will be having the same issue of wrapping up the content.
I see three options here:
Use a RichTextBox
Hoist the WrapPanel from the Windows Phone Toolkit
Write your own Panel
I think #1 should be the preferred approach, assuming you can make it fit the requirements. A RichTextBox can contain plain text inline with Hyperlinks -- the latter does not expose a Tap event, but it does have Click which may suffice.
Failing that, #2 should also be fairly straightforward, and may suffice if you can work with the limitation that the WrapPanel will treat the TextBlocks as atoms (ie, it won't wrap intra-TextBlock text).
Approach #3 would allow more flexibility in theory, but it would take some amount of effort and expertise to implement. You also might face some hassles down the road when you might need to adapt your custom panel to new or unforeseen requirements.
Related
I am attempting to create a tabbed interface using Orchestra/Catel. I load the tabs definitions into a TabInfo class. Those work fine - a tabbed interface is created with the correct tab descriptions. In the content for each tab, I want to create a list of buttons - again loaded into a ButtonInfo class. When a tab is selected, the SelectedTab property is used to select the correct list of buttons (ShowButtons).
I have traced the program and when I click on a tab, the correct collection of buttons is in ShowButtons, but nothing shows up in the tab content. I did get this to work in a normal MVVM program, but without the tabs. I used a listview to show my tabs and an ItemsControl to show the buttons.
Belows is my XAML code for the tabs and my SelectedTab logic for pulling the buttons.```
<Grid>
<orccontrols:TabControl LoadTabItems="LazyLoading" ItemsSource="{Binding TabInfo}" SelectedItem="{Binding SelectedTab}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding TabDesc}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding ShowButtons}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding ButtonDesc}"
MinWidth="150"
Height="30"
FontSize="12"
FontWeight="Bold"
Margin="0,15,25,10"
Padding="5,1">
<Button.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding OracleJob}" Value="0">
<Setter Property="Button.Background" Value="DarkSalmon" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</TabControl.ContentTemplate>
</orccontrols:TabControl>
</Grid>
And the code for populating ShowButtons:
public void OnSelectedTabChanged()
{
int _selectTab = SelectedTab.TabKey;
var _showButtons = ButtonInfo.Where(i => i.ButtonTab == _selectTab);
ObservableCollection<ButtonRecord> _btn = new ObservableCollection<ButtonRecord>(_showButtons);
ShowButtons = _btn;
}
Any help is greatly appreciated. I am a beginner with Orchestra/Catel, so I am probably missing the best way to do this.
I recommend to split up the issue from Orchestra / Catel. Orchestra allows you to provide a view as shell, but this view can live on it's own (the only thing Orchestra does is place it inside the correct location inside the shell). By making this problem unrelated to Orchestra, it makes it a bit easier for us to solve.
Next up, I recommend looking into the Catel docs. There is a full example on how to show a shell with tabs with closable tab buttons, see https://docs.catelproject.com/vnext/tips-tricks/mvvm/using-tabbed-interface-with-mvvm/
I want to remove the ability to expand the command bar. (no dots)
Is this possible?
AFAIK it's not possible to remove the ellipsis (those three dots) from application bar.
If you have no Secondary commands then ellipsis will just show labels of your app bar buttons. Taking a look at ClosedDisplayMode you have only two values: minimal and compact - which means that you cannot have app bar opened with labels without ellipsis.
Other way may be to build your own control which will immitate application bar - then you can put there what you want.
As Romasz Said it's not possible to remove the three dots. But you can create a template smiler to application bar, something like that :
<Grid x:Name="LayoutRoot" >
<Grid VerticalAlignment="Bottom" Background="#FF1F1F1F" >
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal" >
<AppBarButton x:Name="test1" Icon="Play"/>
<AppBarButton x:Name="test2" Icon="ReShare"/>
</StackPanel>
</Grid>
</Grid>
And this will give you :
Currently we are using the HubTile to display a large (50-70) images and text overlayed.
<toolkit:HubTile Margin="0,12,12,0"
Title="{Binding title}"
Message="{Binding itemLink}"
Source="{Binding media}"
GroupTag="BindingHubTile"
Style="{StaticResource HubTileStyle1}">
</toolkit:HubTile>
<TextBlock Height="Auto" FontSize="14" FontFamily="{StaticResource PhoneFontFamilyLight}"
TextWrapping="Wrap" Text="{Binding votes}" TextTrimming="WordEllipsis" VerticalAlignment="Bottom"
Foreground="{StaticResource PhoneForegroundBrush}" TextAlignment="Right" Margin="0,0,15,-7" />
The source is bound to a URI that is retrieved from a webserver which then allows the phone to download the image and display it. The problem is, with this amount of images we are finding that the UI is locking up.
Our hubtiles are loaded into a listbox by means of listbox.ItemSource.
Is there an easy way around this?
When you set to an image - URI it downloads in background and doesn't lock the UI - tested.
The only thing that remains is to find where you have locked it.
I had a similar project, but i created CustomControls to fill ListBox. Custom Control contained - date field, text and image.
Image was loaded like this:
BitmapImage image = new BitmapImage(new Uri(article.ImageURL));
NLBI.Thumbnail.Source = image;
And all images were loading async in background and UI was usable.
Ok, I hope this doesn't have an embarrassingly obvious answer, but I could not find a solution through searching.
I'd like my longlistmulti to function basically like the Mail app, i.e. having the "select" appbar button put the list into Edit mode, so you can perform operations on it.
However I'd like to suppress the behavior where the list is responding to a tap on the left side of any of the items, that first 10% part of the item's width, that puts the List in the Edit mode.
I have a button as part of the item template, that is pretty flush against the left side, that I need as a trigger for it's own event handler for each item.
So I just want to block the event that is putting it into edit mode via tapping on items. Hope this can be done.
Steve
A quick addit'l note: I'd like to suppress this default behavior regardless, even if I do decide to not have that button as my final implementation.. i didn't want to factor that button as a permanent consideration.
You have a couple of options here. One is handling the IsSelectionEnabledChanged event, and the other is modifying the control template. If you want to place the list into edit mode yourself, I'd suggest using the template modification method, as the event handler might be a bit convoluted when it comes to determining where the change event came from.
From the Document Outline pane (CTRL+W, U to make visible), right click your list control, and navigate to Edit Additional Templates => Edit ItemContainerStyle => Edit a Copy... Use the dialog to name and place the template in your preferred resource dictionary. Look for the rectangles named InnerHintPanel and OuterHintPanel and delete them. This will remove the hit area for activating edit mode. The XAML for these rectangles is reproduced below.
<Grid HorizontalAlignment="Stretch">
...
<Rectangle x:Name="InnerHintPanel" Grid.Column="0" Width="24"
Height="{TemplateBinding HintPanelHeight}"
HorizontalAlignment="Left"
Fill="Transparent"
StrokeThickness="0">
<Rectangle.RenderTransform>
<CompositeTransform TranslateX="24"/>
</Rectangle.RenderTransform>
</Rectangle>
...
</Grid>
<Rectangle x:Name="OuterHintPanel" Width="24"
HorizontalAlignment="Left"
Height="{TemplateBinding HintPanelHeight}"
Fill="{TemplateBinding Background}"
StrokeThickness="0" Opacity="0.0"/>
You should probably delete all storyboard animations that have Storyboard.TargetName set to one of these elements' names as well, otherwise the transition in control state will cause exceptions if you enter edit mode and those elements cannot be found.
I needed to access to the ActualWidth of a Border that didn't have a specified Width. I have been told that I can't do that on WinRT so I used a proxy from Florian-Gl (from here).
The thing is that I need to create that proxy on the page's resource like this:
<Page.Resources>
<utils:ActualSizePropertyProxy Element="{Binding ElementName=noteBorder}" x:Name="proxy" />
</Page.Resources>
The problem is that I don't have access to that noteBorder element from the resources, but I have access to pageRoot that is the Page itself.
I guess that I can play with ElementName / Path to get access to noteBorder.
But there is some curious stuff:
The structure is something like:
Page (pageRoot) > Grid > ListView > ListView.ItemTemplate > Grid > Border (noteBorder)
So, If I create the proxy at the same level of the border, It won't run but If I change the ListView to a ItemsControl, it will run and works as expected.
If having it at the same level of the border I change the ElementName to pageRoot it will run at least.
So, It won't run if I put noteBorder (even when I have access to it) if I'm using a ListView, but will work on a ItemsControl, On the other hand, If I have pageRoot it works all ways.
So the question is: Is there a way to access noteBorder from resources? Or maybe a way to access it from another place but working :P
You should be using an Item Template --
By the time you get to
pageRoot) > Grid > ListView or Items Control
At this point in the structure, you're at the element you really want to get at, which is the container of the items that will need the border you are trying to access.
You should define an Item Template and assign the ListView's (or ItemsControl's) ItemTemplate property via binding.
<ListView x:Name="myListView" DataContext="{Binding ToElementIfNotInheritedFromParent}" ItemsSource="{Binding ViewModelListBeingBoundTo}" ItemTemplate="{Binding Source={Static Resource MyCustomItemTemplate}}" />
Where MyCustomItemTemplate is something like
<DataTemplate x:Name="MyCustomItemTemplate">
<Border x:Name="myBorder" >
<StackPanel>
<TextBlock Text="{Binding Path=Title}" />
<TextBlock Text="{Binding Path=FirstProperty}"/>
<TextBlock Text="{Binding Path=SecondProperty}"/>
</StackPanel>
</Border>
</DataTemplate>
Then In your Codebehind (or if ViewModel use the code behind to pass the ListView object to the ViewModel)
DataTemplate dt = this.myListView.Items[indexOfChoice].ItemTemplate as DataTemplate;
Border b = dt.LoadContent() as Border;
int actualWidth = b.AcutalWidth
OR
You can create a FindControl() method that runs recursively to extract the actual control within the border, for instance if you wanted to access one of the Textboxes.
The code for that is here:
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/a612f5a6-e05e-4b68-a813-893eeda159cc