I played around with this code changing some alignment issue.
Now the binding with font is fail. Why. Need help
Thanks.
<Window x:Class="FontViewer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Font Viewer" Height="480" Width="600">
<DockPanel Margin="8" LastChildFill="False">
<Border DockPanel.Dock="Top"
CornerRadius="6"
BorderThickness="1"
BorderBrush="Gray"
Background="LightGray"
Padding="8"
Margin="0 0 0 8">
<TextBlock FontSize="14"
TextWrapping="Wrap">
Select a font to view from the list below.
You can change the text by typing in the region at the bottom.
</TextBlock>
</Border>
<ListBox x:Name="FontList"
DockPanel.Dock="Left"
ItemsSource="{x:Static Fonts.SystemFontFamilies}"
Width="160"/>
<StackPanel Margin="8 0 8 8" DockPanel.Dock="Bottom">
<TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
FontFamily="{Binding ElementName=Fontlist, Path=SelectedItem}"
FontSize="10"
TextWrapping="Wrap"
Margin="0 0 0 4"
HorizontalAlignment="right"
VerticalAlignment="Bottom"/>
<TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
FontFamily="{Binding ElementName=Fontlist, Path=SelectedItem}"
FontSize="16"
TextWrapping="Wrap"
Margin="0 0 0 4"/>
<TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
FontFamily="{Binding ElementName=Fontlist, Path=SelectedItem}"
FontSize="24"
TextWrapping="Wrap"
Margin="0 0 0 4"
HorizontalAlignment="right"/>
<TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
FontFamily="{Binding ElementName=Fontlist, Path=SelectedItem}"
FontSize="32"
TextWrapping="Wrap"/>
</StackPanel>
<TextBox x:Name="SampleText"
VerticalAlignment="Top"
MinLines="2"
Margin="8 0 0 0"
TextWrapping="Wrap"
ToolTip="Type here to change the priview text.">
The quick brown fox jumps over the lazy dog.
</TextBox>
</DockPanel>
</Window>
You have accidently changed <ListBox x:Name="Fontlist" into <ListBox x:Name="FontList".
Related
Not sure what I'm doing wrong: but for some reason I cannot make the Expander control show its border even though I have specified it in the XAML.
Can someone help me get the border to show up.
Here is the XAML:
<Popup x:Name="PopLink" StaysOpen="True" Placement="Mouse" PopupAnimation="Fade" AllowsTransparency="True" MaxWidth="300">
<Popup.Style>
<Style TargetType="Popup">
<EventSetter Event="MouseLeave" Handler="OnPopupMouseLeave"></EventSetter>
</Style>
</Popup.Style>
<Border BorderBrush="{DynamicResource Esri_BorderBrush}" BorderThickness="2" Background="{DynamicResource Esri_ControlBackgroundBrush}">
<StackPanel>
<DockPanel>
<TextBlock Margin="10 10 5 0" Text="{Binding PopupDesc}" FontWeight="Bold" HorizontalAlignment="Left"></TextBlock>
<Button BorderThickness="0" Margin="0 -1 0 0 " x:Name="ButtonClosePopup" Click="ButtonClosePopup_OnClick" Width="15" Height="20" HorizontalAlignment="Right" Content="X"></Button>
</DockPanel>
<Separator Margin="10 10 10 5"/>
<TextBlock Margin="10 3 10 5" TextWrapping="Wrap" FontWeight="Bold" FontSize="14" Text="{Binding PopupTitle}"></TextBlock>
<TextBlock Margin="10 3 10 5" TextWrapping="Wrap" FontStyle="Italic" Text="{Binding PopupAuthors}"></TextBlock>
<TextBlock Margin="10 5 10 0" TextWrapping="Wrap" Text="{Binding PopupText}"></TextBlock>
<Expander BorderBrush="DarkGray" BorderThickness="1" Visibility="{Binding IsPopupAbstractVisible}" Header="Abstract" Margin="10 5" >
<TextBlock Height="100" TextWrapping="Wrap">
<TextBox TextWrapping="Wrap" MaxHeight="150" Margin="5" Text="{Binding Path=PopupAbstract}" VerticalScrollBarVisibility="Visible" BorderThickness="0"></TextBox>
</TextBlock>
</Expander>
<TextBlock Margin="10 0 10 10" TextWrapping="Wrap" Text="{Binding PopupKeywords}" FontStyle="Italic"></TextBlock>
</StackPanel>
</Border>
</Popup>
I'm using OxyPlot for WPF and the PlotView adds a space to the right of it instead of filling up the entire area as you can see in this picture:
I added the black box to show to where the PlotView should extend to.
But in the designer the PlotView does extrend so far:
Is this something that is fixable? Or is the only way to fix it is to "cheat" and instead of fitting controls together in a panel i just overlap the rightside over the PlotView.
<Grid Background="{StaticResource Milky}">
<DockPanel>
<Grid Height="50" Width="5" DockPanel.Dock="Left"/>
<Grid Height="5" Width="50" DockPanel.Dock="Top"/>
<Grid Width="122" DockPanel.Dock="Right" VerticalAlignment="Top">
<StackPanel>
<Border Margin="3" Height="248" Width="116" BorderThickness="1" BorderBrush="{StaticResource LightGrayGray}" CornerRadius="3">
<ItemsControl ItemsSource="{Binding Path=GraphLineItems}" HorizontalAlignment="Left">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:GraphLineItemV DataContext="{Binding }" ColorPalette="{StaticResource MilkyPalette}">
</local:GraphLineItemV>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<Border Margin="3 0 3 3" Height="128" BorderThickness="1" BorderBrush="{StaticResource LightGrayGray}" CornerRadius="3">
<WrapPanel>
<local:IconButton Width="32" Command="{Binding Path=FitToFrameCmd}" ToolTip="{StaticResource ToolTipFitGraph}" Margin="1" Height="32" BorderThickness="1" IconHeight="28" IconWidth="28" ColorPaletteFore="{StaticResource DarkestGraySolid}" ColorPalette="{StaticResource MilkyGPalette}" Image="{StaticResource ZoomIcon}" IconMargin="1"/>
<local:IconButton Width="32" Command="{Binding Path=ClearGraphCmd}" ToolTip="{StaticResource ToolTipClearGraph}" Margin="1" Height="32" BorderThickness="1" IconHeight="24" IconWidth="24" ColorPaletteFore="{StaticResource DarkestGraySolid}" ColorPalette="{StaticResource MilkyGPalette}" Image="{StaticResource DeleteIcon}" IconMargin="4"/>
</WrapPanel>
</Border>
</StackPanel>
</Grid>
<Grid Height="80" DockPanel.Dock="Bottom">
<StackPanel>
<StackPanel Orientation="Horizontal">
<local:ColoredImage x:Name="zoomIcon" Image="{StaticResource ZoomIcon}" Width="24" Height="24" HorizontalAlignment="Left" VerticalAlignment="Top" Color="{StaticResource Gray}"/>
<Slider HorizontalAlignment="Left" Minimum="0.5" Maximum="85" VerticalAlignment="Top" Margin="0,5,0,0" Value="{Binding Zoom, UpdateSourceTrigger=PropertyChanged}">
<Slider.Width>
<MultiBinding Converter="{StaticResource Subtraction}">
<Binding Path="ActualWidth" ElementName="graph"/>
<Binding Path="ActualWidth" ElementName="zoomIcon"/>
</MultiBinding>
</Slider.Width>
</Slider>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,8,0,0">
<TextBlock Text="Refresh rate: " HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox Text="{Binding UpdateInterval, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" PreviewTextInput="NumberValidationTextBox" MaxLength="3" FontFamily="{StaticResource MonoFont}" Width="28" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text=" (ms)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,8,0,0">
<TextBlock Text="Saved length: " HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox Text="{Binding SavedLength, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" PreviewTextInput="NumberValidationTextBox" MaxLength="3" FontFamily="{StaticResource MonoFont}" Width="28" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock Text=" (s)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</StackPanel>
</Grid>
<Grid x:Name="grid">
<Canvas x:Name="canvas" Background="{StaticResource White}"/>
<Grid Background="Black" Width="20" Height="20" HorizontalAlignment="Right"/>
<oxy:PlotView x:Name="graph" Background="Transparent"/>
</Grid>
</DockPanel>
</Grid>
I guess you bind your PlotView to a PlotModel? In that case you can set the PlotModel's PlotMargins property to set the margins of the plot area within the plot view and assign values for all four sides independently.
In order to get completely rid of the margin at the right side, you need to assign a negative value.
I have created the plot below using this line
plotModel.PlotMargins = new OxyThickness(40, -8, -8, 35);
I have changed the general background color of the plot view to make it clearer.
I'm binding the ICommand nammed GoToSheet to a Button with ControlTemplate.
<Button Margin="10 10 10 10" Command="{Binding GoToSheet}">
<Button.Template>
<ControlTemplate>
<DockPanel Width="840">
<Border DockPanel.Dock="Left" BorderBrush="Black" BorderThickness="5"></Border>
<Border DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="2"></Border>
<Border DockPanel.Dock="Right" BorderBrush="Black" BorderThickness="2"></Border>
<Border DockPanel.Dock="Bottom" BorderBrush="Black" BorderThickness="2"></Border>
<DockPanel DockPanel.Dock="Left">
<StackPanel Orientation="Vertical" Margin="20 10 0 10">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical" Margin="0 0 0 10">
<TextBlock Text="{Binding Client}" FontSize="30" FontWeight="Bold" MaxWidth="480"></TextBlock>
<TextBlock Text="{Binding Lieu}" FontSize="22" MaxWidth="480"></TextBlock>
</StackPanel>
<Image Height="35" Width="45" Margin="7 3 0 0" VerticalAlignment="Top" Source="/Resource/Image/CHC.png"></Image>
</StackPanel>
<StackPanel Orientation="Vertical" VerticalAlignment="Bottom" Margin="20 0 0 0">
<TextBlock Text="{Binding MarqueEngin}" FontSize="26" FontWeight="Bold"></TextBlock>
<TextBlock Text="{Binding ModeleEngin}" FontSize="19" FontWeight="Bold"></TextBlock>
</StackPanel>
</StackPanel>
</DockPanel>
<DockPanel DockPanel.Dock="Right" Margin="0 10 20 10">
<TextBlock DockPanel.Dock="Top" Text="{Binding DateIntervention, StringFormat=dd/MM/yyyy}" FontSize="30" HorizontalAlignment="Right"></TextBlock>
<TextBlock DockPanel.Dock="Bottom" Text="{Binding NumeroEngin}" VerticalAlignment="Bottom" FontSize="30" FontWeight="Bold" HorizontalAlignment="Right"></TextBlock>
</DockPanel>
</DockPanel>
</ControlTemplate>
</Button.Template>
</Button>
Why the command only works on the successes areas (see image) ?
Is there a solution for the command works on the entire button area ?
it is caused by lack of background ( button background is NULL).
Please set background for some color, for example:
<Button Margin="10 10 10 10" Background="Transparent" Command="{Binding GoToSheet}">
Here is the solution for similar problem:
Mouse event on transparent background
It should help.
The transparent background must be on the DockPanel in place of Button.
<Button Margin="10 10 10 10" Command="{Binding GoToSheet}">
<Button.Template>
<ControlTemplate>
<DockPanel Width="840" Background="Transparent">
Thanks to macieqqq.
I have a long list coming from my Business logic which I need to display on the UI. As the list is long, I tried adding Scrollviewer but I am unable to scroll.
please find the XAML code below
<Grid Margin="0,32,0,0">
<TextBlock Text="{Binding IDC_WiFi, Source={StaticResource Resources}}" FontFamily="Segoe UI" FontSize="20" Foreground="#4cb5ab" HorizontalAlignment="Left" />
<Button Command="{Binding HardwareWifiAccordionCommand}" BorderThickness="0" Width="16" HorizontalAlignment="Right" Height="16" >
<Button.Background>
<ImageBrush ImageSource="{Binding AccordionImageHardwareWifi}" />
</Button.Background>
</Button>
</Grid>
<TextBlock Text="Klein's, Anil's" FontFamily="Segoe UI" FontSize="15" Foreground="#8fa3ad"/>
<StackPanel Height="200" Visibility="{Binding IsAccordionHardwareWifi, Converter={StaticResource Bool2Visible}}">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding WifiList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,32,0,0">
<Grid>
<Image Source="/Images/Assets/da_wifi1_16x16.png" Height="16" Width="16" HorizontalAlignment="Left" />
<TextBlock Margin="25,0,0,0" Text="{Binding NetworkName}" FontSize="15" Foreground="#FFFFFF" />
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Right" />
</Grid>
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Left" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
Put it into a ScrollViewer.
<ScrollViewer>
<StackPanel >
</StackPanel>
</ScrollViewer>
As #StepUp points out you can just wrap it with a ScrollViewer but I believe this breaks virtualization. That's outside the scope of this question of course but it's something to keep in mind. If performance is likely to become an issue then I'd suggest implementing this as shown in the answer to this question.
The scrollviewer needed a Height to be set
<Grid Margin="0,32,0,0">
<TextBlock Text="{Binding IDC_WiFi, Source={StaticResource Resources}}" FontFamily="Segoe UI" FontSize="20" Foreground="#4cb5ab" HorizontalAlignment="Left" />
<Button Command="{Binding HardwareWifiAccordionCommand}" BorderThickness="0" Width="16" HorizontalAlignment="Right" Height="16" >
<Button.Background>
<ImageBrush ImageSource="{Binding AccordionImageHardwareWifi}" />
</Button.Background>
</Button>
</Grid>
<TextBlock Text="Klein's, Anil's" FontFamily="Segoe UI" FontSize="15" Foreground="#8fa3ad"/>
<StackPanel Height="200" Visibility="{Binding IsAccordionHardwareWifi, Converter={StaticResource Bool2Visible}}">
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="350">
<ItemsControl ItemsSource="{Binding WifiList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,32,0,0">
<Grid>
<Image Source="/Images/Assets/da_wifi1_16x16.png" Height="16" Width="16" HorizontalAlignment="Left" />
<TextBlock Margin="25,0,0,0" Text="{Binding NetworkName}" FontSize="15" Foreground="#FFFFFF" />
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Right" />
</Grid>
<TextBlock Text="" FontSize="15" Foreground="#8fa3ad" HorizontalAlignment="Left" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
So, let's say I have a DataTemplate:
<DataTemplate x:Key="ProjectsDataItemTemplate">
<ComboBoxItem x:Name="ProjectComboBox"
Opacity="1" HorizontalAlignment="Stretch"
Foreground="#FF80BBD2"
VerticalAlignment="Center" VerticalContentAlignment="Center"
Background="Transparent"
Style="{DynamicResource ComboBoxItemStyle1}">
<StackPanel>
<Label Content="{Binding Name}" Height="32" VerticalContentAlignment="Top"
FontWeight="Bold" Foreground="#FFFEF9F9" AllowDrop="True" />
<TextBlock Text="{Binding Description}"
Foreground="#FF80BBD2"
Padding="5,0,0,10"
FontStyle="Italic" />
</StackPanel>
</ComboBoxItem>
</DataTemplate>
In this case, the Label and the TextBlock both overlap the clickable area for the ComboBoxItem. How do I ignore and/or pass a click through to the ComboBoxItem when I click one of its child controls?
Just set the IsHitTestVisible property to false for those elements:
<DataTemplate x:Key="ProjectsDataItemTemplate">
<ComboBoxItem x:Name="ProjectComboBox"
Opacity="1"
HorizontalAlignment="Stretch"
Foreground="#FF80BBD2"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
Background="Transparent"
Style="{DynamicResource ComboBoxItemStyle1}">
<StackPanel>
<Label IsHitTestVisible="False"
Content="{Binding Name}"
Height="32"
VerticalContentAlignment="Top"
FontWeight="Bold"
Foreground="#FFFEF9F9"
AllowDrop="True" />
<TextBlock IsHitTestVisible="False"
Text="{Binding Description}"
Foreground="#FF80BBD2"
Padding="5,0,0,10"
FontStyle="Italic" />
</StackPanel>
</ComboBoxItem>
</DataTemplate>