Tried using a Label as well.
The text in the button is being left aligned.
<ItemsControl ItemsSource="{Binding ButtonLinks}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<RadioButton Style="{StaticResource {x:Type ToggleButton}}"
Margin="5"
Background="{x:Null}"
Height="40"
FontSize="14"
GroupName="Views"
FontWeight="Normal"
cal:Message.Attach="ShowPage">
<TextBlock Text="{Binding BtnText}"
TextAlignment="Center"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</RadioButton>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
ETA:
I'm using MahApps.Metro overlay and when I remove the controls resource in the App.xaml it works, basically is there a way to override a property like alignment on a resource you pull in?
The line I remove from app.xaml:
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
I had to override HorizontalAlignment for a RadioButton which was being set to "Left" in the mahapps library.
Related
I have a ListView populated with ListViewItems, like navigation bar style menu options.
I would like to create the effect of the ListViewItem border "bulging" like in the Mail application on Win10 as shown in this picture
The border "bulges" (fisheye?) as the mouse moves left and right along the ListViewItem. It's a nice effect that I'd like to replicate but am struggling to even get started on how to tackle this.
My list items are bound to a content control which is templated with a ControlTemplate. The ItemsControl ItemTemplate is a DataTemplate containing an image and a Textbox wrapped inside a button control, like this .... (although I suspect how it's created is probably not relevant to my question)
<ContentControl Content="{Binding Path=MenuModel.AllMenuItems}"
x:Name="menuCtrl1"
Template="{StaticResource MenuListItemControlTemplate}"
VerticalAlignment="Top" />
...
<ControlTemplate x:Key="MenuListItemControlTemplate" TargetType="ContentControl">
<Border Background="Transparent" >
<ScrollViewer Margin="{StaticResource DefaultNoMargin}" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{TemplateBinding Content}"
ItemTemplate="{StaticResource MenuListItemDataTemplate}" />
</ScrollViewer>
</Border>
</ControlTemplate>
...
<DataTemplate x:Key="MenuListItemDataTemplate" DataType="local:SingleMenuItem">
<Button Command="{Binding MenuCommand}" Style="{StaticResource MenuButtonStyle}" >
<StackPanel Orientation="Horizontal" >
<Image Source="{Binding MenuIconSource}" Style="{StaticResource MenuItemImage}" />
<TextBox Text="{Binding DisplayText}" Style="{StaticResource MenuItemStyle}" />
</StackPanel>
</Button>
</DataTemplate>
Any tips on how to achieve it or even where to start would be gratefully received.
On click of toggle button I want to show a context menu. As I want to change the visual appearance of context menu, I have created controltemplate and data template as below,
<TabItem>
<TabItem.HeaderTemplate>
<DataTemplate>
<ContextMenu ItemSource="{Binding Collection}">
<ContextMenu.Template>
<ControlTemplate>
<Grid Margin="10">
<ListBox Width="150" Height="70"/>
</Grid>
</ControlTemplate>
<ContextMenu.ItemTemplate>
<DataTemplate>
<StackPanel>
<CheckBox Content="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu.Template>
</ContextMenu>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
Post this change I could see only a LisBox being shown clicking upon toggle button. I am not able to visualize the Data template that I had set (Checkbox). Data binding is also not working. Not able to figure out what could be the issue.
You should bind the ItemsSource property of the ListBox to the ItemsSource of the ContextMenu and define an ItemTemplate for the ListBox:
<ContextMenu ItemsSource="{Binding Collection}">
<ContextMenu.Template>
<ControlTemplate TargetType="ContextMenu">
<Grid Margin="10">
<ListBox ItemsSource="{TemplateBinding ItemsSource}" Width="150" Height="70">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Content="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</ControlTemplate>
</ContextMenu.Template>
</ContextMenu>
I want to get ListViewItem Height, BackGround and ForeGround look the same as the application scope default style defines button to look like. How this can be done?
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}">
</TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
I don't know if this iss universal but in my environment i did it like this:
<DataTemplate>
<TextBlock Text="{Binding}" Background="{DynamicResource Theme.Button.Background}"
Foreground="{DynamicResource Theme.Button.Foreground}"
Padding="{DynamicResource Theme.Button.Padding}"/>
</DataTemplate>
I have a Listview defined like this:
<ListView x:Name="lvPlaylist" Width="530" Height="337" IsItemClickEnabled="True" ItemClick="gvPlaylist_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Stretch="Fill" Source="{Binding albumArtURI}" Height="48" Width="48" />
<TextBlock Text="{Binding GetPlaylistFormat}" Width="500" Height="18"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I want to open a "context"-Flyout on each Item on click.
So far I was only able to attach the flyout to the whole but then the flyout is shown at the border of the listview - not directly attached to the selected item.
Buttons have a Flyout property. All you have to do is wrap the contents of the template in a Button, create a Style for the button which removes all visuals for it, then create a Flyout for it.
<DataTemplate>
<Button Style="{StaticResource ButtonWrapperStyle}">
<Button.Content>
<Grid>
<Image Stretch="Fill" Source="{Binding albumArtURI}" Height="48" Width="48" />
<TextBlock Text="{Binding GetPlaylistFormat}" Width="500" Height="18"/>
</Grid>
</Button.Content>
<Button.Flyout>
<!-- Make Flyout Here -->
</Button.Flyout>
</Button>
</DataTemplate>
Obviously there is stuff left to do here, but you get the idea.
Hope this helps and happy coding!
Looks like you can also do it like this
From MSDN
"The next example shows a Flyout attached to a TextBlock. As noted earlier, you can attach a Flyout to any FrameworkElement by using the FlyoutBase.AttachedFlyout attached property."
<TextBlock Text="{Binding ElementName=MyTextBox, Path=Text}"
Tapped="TextBlock_Tapped" FontSize="18">
<FlyoutBase.AttachedFlyout>
<Flyout>
<TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>
I have recently moved ContentControl on the View(xaml) inside a telerik RadPane like so:
<telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer Visibility="{Binding UserControlVisible}">
<telerik:RadPaneGroup>
<telerik:RadPane CanUserClose="False" Header="{Binding Operation}">
<ContentControl x:Name="ActiveItem" Margin="10" VerticalAlignment="Top" />
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>
Since, I have done this my UserControls are not injected as the Content inside ContentControl. I have tried to explicitly bind Content Property on ContentControl to ActiveItem but that says, unable to find the associated view.
Any help will be much appreciated.
try to add a datatemplate to the current content:
<DataTemplate>
<ContentControl cal:View.Model="{Binding}" />
</DataTemplate>
Where cal is:
xmlns:cal="http://www.caliburnproject.org"
and bind the active item explicitly.
Now it looks like
<telerik:RadDocking.DocumentHost>
<telerik:RadSplitContainer Visibility="{Binding UserControlVisible}">
<telerik:RadPaneGroup>
<telerik:RadPane CanUserClose="False" Header="{Binding Operation}">
<ContentControl x:Name="ActiveItem" Margin="10" VerticalAlignment="Top" Content="{Binding ActiveItem}">
<ContentControl.ContentTemplate>
<DataTemplate>
<ContentControl cal:View.Model="{Binding}" />
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</telerik:RadPane>
</telerik:RadPaneGroup>
</telerik:RadSplitContainer>
</telerik:RadDocking.DocumentHost>